函数防抖和节流

防抖debounce
概念其实是从机械开关和继电器的“去弹跳”(debounce)衍生出来的,基本思路就是把多个信号合并为一个信号。这篇english文章 解释得非常清楚。

短时间内多次触同一个事件,只执行最后一次,或者在开始时执行,中间不执行。比如公交上上车,要等待最后一个乘客上车,车才开走。

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)
  }
}

debounce 返回了一个闭包,这个闭包依然会被连续频繁地调用,但是在闭包内部,却限制了原始函数 fn 的执行,强制 fn 只在连续操作停止后只执行一次。

节流

节流是指连续触发事件的过程中以一定时间间隔执行函数。节流会稀释你的执行频率,比如每间隔1秒钟,只会执行一次函数,无论这一秒钟内触发了多少次事件。就有点像乘坐电梯,电梯在一定时间内,就会自动运行,而不能等电梯装满了人,电梯才运行。

var throttle = function(delay, fn){
    var last = 0;
    return function(){
        var curr = +new Date();
        if(curr - last > delay){
            fn.apply(this, arguments);
            last = curr;
        }
    }
}

你可能感兴趣的:(函数防抖和节流)