防抖函数。

  将几次操作合并为一次操作进行。设置一个计时器,规定在延迟时间后触发函数,但是在延迟时间内如果再次触发,就会取消之前的计时器。如此,只有最后一次操作能触发。代码如下:

function debounce(fn,wait){
let timer=null;
return function(){
let args=arguments,that=this;
timer&&clearTimeout(timer);
timer=setTimeout(function(){fn.apply(that,args)},wait)
}
}

节流函数。

  一定时间内只触发一次函数。并且开始触发一次,结束触发一次。代码如下:

function throttle(fun, delay){
let timer = null;
let startTime = Date.now();
return function(){
let curTime = Date.now();
let remain = delay - (curTime - startTime);
let that = this;
let args = arguments;
clearTimeout(timer);
if(remain <= 0){
fun.apply(that,args);
startTime = Date.now();
}else{
timer = setTimeout(fun, remain);
}
}
}

js实现防抖,节流的更多相关文章

  1. JS的防抖与节流

    JS的防抖与节流在进行窗口的resize.scroll,输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕.此时我们可以采用debounce(防抖)和t ...

  2. JS的防抖和节流

    数个月之前,在一次前端的性能优化中,接触到了JS中防抖和节流,一开始还不明白他们的应用在哪里,可后来才知道,这是前端中最基础的性能优化,在绑定 scroll .resize 这类事件时,当它发生时,它 ...

  3. js函数的节流与防抖

    一.防抖&节流 在前端开发中有一部分用户行为会频繁的触发事件执行,而对于DOM的操作.资源加载等耗费性能的处理,很可能会导致界面卡顿,甚至浏览器奔溃.函数的节流与防抖就是为了解决类似需求而产生 ...

  4. js函数的节流和防抖

    js函数的节流和防抖 用户浏览页面时会不可避免的触发一些高频度触发事件(例如页面 scroll ,屏幕 resize,监听用户输入等),这些事件会频繁触发浏览器的重拍(reflow)和重绘(repai ...

  5. JS: 防抖节流

    防抖节流 防抖(debounce) 先来看看下面的代码: //触发滚动事件,num 就加1 let num = 0; function incNum() { console.log('鼠标滚动中'); ...

  6. vue防抖节流之v-debounce--throttle使用指南

    最新封装了一个vue防抖节流自定义指令,发布到npm上,有用欢迎star,谢谢! npm地址:https://www.npmjs.com/package/v-debounce-throttle git ...

  7. vue防抖节流函数---组件封装,防止按钮多次点击

    1.vue 封装utils.js /** * @param {function} func 执行函数 * @param {number} time 防抖节流时间 * @param {boolean} ...

  8. 【跟着大佬学JavaScript】之lodash防抖节流合并

    前言 前面已经对防抖和节流有了介绍,这篇主要看lodash是如何将防抖和节流合并成一个函数的. 初衷是深入lodash,学习它内部的好代码并应用,同时也加深节流防抖的理解.这里会先从防抖开始一步步往后 ...

  9. [概念] js的函数节流和throttle和debounce详解

    js的函数节流和throttle和debounce详解:同样是实现了一个功能,可能有的效率高,有的效率低,这种现象在高耗能的执行过程中区分就比较明显.本章节一个比较常用的提高性能的方式,通常叫做&qu ...

  10. underscore.js中的节流函数debounce及trottle

    函数节流   throttle and debounce的相关总结及想法 一开始函数节流的使用场景是:放止一个按钮多次点击多次触发一个功能函数,所以做了一个clearTimeout setTimeou ...

随机推荐

  1. 2019-8-31-C#-循环的判断会进来几次

    title author date CreateTime categories C# 循环的判断会进来几次 lindexi 2019-08-31 16:55:58 +0800 2018-06-14 0 ...

  2. python 初始化init方法

  3. python爬虫:一些爬虫常用的技巧

    1.基本抓取网页 get方法 import urllib2 url = "http://www.baidu.com" response = urllib2.urlopen(url) ...

  4. Length of Last Word输出最后单词的字母个数

    Given a string s consists of upper/lower-case alphabets and empty space characters ' ', return the l ...

  5. Python学习之路4☞条件和循环

    一.if语句 1.1 功能 计算机又被称作电脑,意指计算机可以像人脑一样,根据周围环境条件(即expession)的变化做出不同的反应(即执行代码) if语句就是来控制计算机实现这一功能 1.2 语法 ...

  6. python的sorted排序具体解释

    排序.在编程中常常遇到的算法.我也在几篇文章中介绍了一些关于排序的算法. 有的高级语言内置了一些排序函数.本文讲述Python在这方面的工作.供使用python的程序猿们參考,也让没有使用python ...

  7. 2019-10-26-dotnet-core-发布只有一个-exe-的方法

    title author date CreateTime categories dotnet core 发布只有一个 exe 的方法 lindexi 2019-10-26 8:42:7 +0800 2 ...

  8. [USACO07JAN]区间统计Tallest Cow

    前缀和 sum[i]表示前i个数的和 每次读入a[i]的时候 sum[i] = sum[i - 1] + a[i]; 查询l ~ r区间的和: sum[r] - sum[l - 1] 差分 即前缀和的 ...

  9. ListOfOpenSourcePrograms

    ListOfOpenSourcePrograms Contents Desktop Applications Communication Engineering Educational Financi ...

  10. 【Pandas】Pandas求某列字符串的长度,总结经验教训

    测试集大小: test.shape(898, 11) 对某列的字符串做统计长度1.for遍历法:start = time.time()for i in test.index.values: test. ...