函数限流,防止多次触发函数 Debounce 和 Throttle 的原理及实现

场景

1,有些用户很调皮,快速多次点击一个按钮。

2,用户不必特地捣乱,他在一个正常的操作中,都有可能在一个短的时间内触发非常多次事件绑定程序。比如页面绑定的 resize 事件。



分析

怎么解决?函数节流就是一种办法。函数节流,简单地讲,就是让一个函数无法在很短的时间间隔内连续调用,只有当上一次函数执行后过了你规定的时间间隔,才能进行下一次该函数的调用。


函数节流的原理挺简单的,估计大家都想到了,那就是定时器。当我触发一个时间时,先 setTimout 让这个事件延迟一会再执行,如果在这个时间间隔内又触发了事件,那我们就 clear 掉原来的定时器,再 setTimeout 一个新的定时器延迟一会执行,就这样。



解决方法

在《JavaScript 高级程序设计》22.3.3节有介绍函数节流,里面封装了这样一个函数节流函数:

tools.throttle = function (method, context) {
  clearTimeout(method.tId);
  method.tId = setTimeout(function(){
    method.call(context);
  },500);
}

它把定时器 ID 存为函数的一个属性。而调用的时候就直接写

window.onresize = function(){
  throttle(myFunc);
}

这样两次函数调用之间至少间隔 100ms。


下面是一个优化版函数:

/**
*
* @param fn {Function}   实际要执行的函数
* @param delay {Number}  延迟时间,也就是阈值,单位是毫秒(ms)
*
* @return {Function}     返回一个“去弹跳”了的函数
*/
function debounce(fn, delay) {

  // 定时器,用来 setTimeout
  var timer

  // 返回一个函数,这个函数会在一个时间区间结束后的 delay 毫秒时执行 fn 函数
  return function () {

    // 保存函数调用时的上下文和参数,传递给 fn
    var context = this
    var args = arguments

    // 每次这个返回的函数被调用,就清除定时器,以保证不执行 fn
    clearTimeout(timer)

    // 当返回的函数被最后一次调用后(也就是用户停止了某个连续的操作),
    // 再过 delay 毫秒就执行 fn
    timer = setTimeout(function () {
      fn.apply(context, args)
    }, delay)
  }
}


使用方法:

document.querySelector('button').addEventListener("click", debounce(function(e){
  // 执行代码
},200));



Throttle 方案

上面的的方案被称为 Debounce,某些情况下对于 Debounce 的处理方式我们可能不满意,比如对每个 500ms 的间隔的事件的连续触发,我们想要 handler 至少执行一次,可能是在 500ms 的开头,也可能是在结尾,比如是开头,此时我们会怎么做?我们可能会想到每次触发事件时,把当次的触发时间和上次的「handler 的执行时间」(而 debounce 是上次事件的触发时间)对比,那么每次事件的触发时间和上次 handler 的执行时间会有个差值,如果这个差值大于 500ms,那么理所应当地,执行 handler 并记录此时的执行时间作为下一次触发时的参考时间;如果小于 500ms ,就什么也不做。这个延时到期了之后执行 handler,执行 handler 之后的再次触发事件时就创建一个新的时长为 500ms 的延迟。这样我们就保证了每个 500ms 内的多次事件触发的第一次总会得到处理。这种短时间间隔内处理多次事件触发的机制就是 Throttle。相同情形下,10s 中连续触发事件,任意相邻两次触发时间间隔小于 500ms,debounce 只会执行一次 handler 而 throttle 会执行 10(或者 11)次。


代码实现:

/**
*
* @param fn {Function}   实际要执行的函数
* @param delay {Number}  执行间隔,单位是毫秒(ms)
*
* @return {Function}     返回一个“节流”函数
*/

function throttle(fn, threshhold) {

  // 记录上次执行的时间
  var last

  // 定时器
  var timer

  // 默认间隔为 250ms
  threshhold || (threshhold = 250)

  // 返回的函数,每过 threshhold 毫秒就执行一次 fn 函数
  return function () {

    // 保存函数调用时的上下文和参数,传递给 fn
    var context = this
    var args = arguments

    var now = +new Date()

    // 如果距离上次执行 fn 函数的时间小于 threshhold,那么就放弃
    // 执行 fn,并重新计时
    if (last && now < last + threshhold) {
      clearTimeout(timer)

      // 保证在当前时间区间结束后,再执行一次 fn
      timer = setTimeout(function () {
        last = now
        fn.apply(context, args)
      }, threshhold)

    // 在时间区间的最开始和到达指定间隔的时候执行一次 fn
    } else {
      last = now
      fn.apply(context, args)
    }
  }
}

原理也不复杂,相比 debounce,无非是多了一个时间间隔的判断,其他的逻辑基本一致。throttle 的使用方式如下:


document.querySelector('button').addEventListener("click", throttle(function(e){
  // 执行代码
},200));




参考:

http://www.alloyteam.com/2012/11/javascript-throttle/

https://blog.csdn.net/redtopic/article/details/69396722

https://www.jianshu.com/p/8b0757bdaeaf

真诚赞赏,手留余香
赞赏
随机推荐
PS手绘20171012
macOS 安装 nginx
thinkphp5 r4 生成多级分类
PHPExcel读取和写入Excel文件
xcode ios 模拟器没有HOME按键解决方法
Flex 布局 space-between 最后一行左对齐最佳实践
Windows下Apache开启rewrite
display:inline-block元素之间空隙的产生原因和解决办法
Mysql无法启动 使用GPT Drive
树妖1