什么是防抖、节流？怎么实现它们？

类似于输入框联想、监听滚动这种会频繁触发的事件，我们实际上是不需要它们每次都触发的，如果每次都触发会给浏览器造成沉重的负担，防抖和节流就是用来限制这些事件的触发频率的。

防抖：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

例子：如果有人进电梯，那电梯将在10秒钟后出发，这时如果又有人进电梯了，我们又得等10秒再出发。

思路：通过闭包维护一个变量，此变量代表是否已经开始计时，如果已经开始计时则清空之前的计时器，重新开始计时。

function debounce(fn, wait) {
    // 使用闭包保存持久变量
    var timeout = null;
    return function() {
        if(timeout !== null) 
                // 如果持续触发，就把前面的定时器取消掉，这样来保证只有不触发事件时才开始计时
                clearTimeout(timeout);
        timeout = setTimeout(fn, wait);
    }
}
// 处理函数
function handle() {
    console.log(Math.random()); 
}
// 滚动事件
window.addEventListener('scroll', debounce(handle, 1000));

节流：规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。

例子：游戏内的技能冷却，无论你按多少次，技能只能在冷却好了之后才能再次触发

思路：通过闭包维护一个变量，此变量代表是否允许执行函数，如果允许则执行函数并且把该变量修改为不允许，并使用定时器在规定时间后恢复该变量。

const throttle = function (func, delay) {
  var timer = null;
  return function () {
    var context = this;
    var args = arguments;
    if (!timer) {
      timer = setTimeout(function () {
        func.apply(context, args);
        timer = null;
      }, delay);
    }
  }
}

function handle() {
  console.log(Math.random());
}

window.addEventListener('scroll', throttle(handle, 1000));

很多同学都知道防抖和节流，但是这两种技术的具体区别却不太清楚，简单来说就是：函数防抖是某一段时间内只执行一次，而函数节流是间隔时间执行。

标签：function,触发,防抖,节流,它们,timeout,变量
来源： https://blog.51cto.com/u_14785218/2878591