节流和防抖是什么?有什么区别?怎么实现?

防抖:若事件在10s内连续被触发,则只响应最后一次事件。比如人为在页面快速点击,则只触发最后一次点击。

节流:若事件在10s内被连续触发,则每2s(人为设置)触发一次事件。比如人为在页面快速点击,则有5次事件被触发。

他们的作用都是降低回调执行频率,节省计算资源的。

节流实现:

function(func, wait) {
  var previous = 0
  return function() {
    var now = Date.now()
    if (now - previous > wait) {
      func.apply(this, arguments)
      previous = now
    }
  }
}

分析:传入定义的wait时间小于函数两次调用的时间差时,函数不会被执行,只有两次调用的时间差大于wait值,函数才会被执行,所以函数会每隔一定时间被执行一次,实现了节流。

防抖实现:

function(func, wait) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(func, wait);
  };
};

分析:每当函数被调用的时候,就会设置一个延迟,当下一次调用时,延迟会被重置,所以如果一直连续调用的话,延迟一直被重置,这样函数一直都不会被调用,只有等到函数一段时间没有被调用(时间大于最后一次延迟)时,函数才会被调用。这样,函数就只会在持续调用时间段内的最后一次被调用,实现了防抖。