什么是防抖？如何实现？

动作绑定事件，动作发生后一定时间后触发事件，在这段时间内，如果该动作又发生，则重新等待一定时间再触发事件。

实现：每次触发事件时都取消之前的延时调用方法。

function debounce(fn) {
  let timer = null;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, arguments)
    }, 500)
  };
}

什么是节流？如何实现？

动作发生后一段时间后触发事件，在这段时间内，如果动作又发生，则无视该动作，直到事件执行完后，才能重新触发。

实现：每次触发事件时都判断当前是否有等待执行的延时函数，如果有，则无视该次动作。

function throttle(fn) {
  let canRun = true; 
  return function() {
    if (!canRun) return;
    canRun = false; 
    setTimeout(() => { 
      fn.apply(this, arguments);
      canRun = true;
    }, 500);
  };
}

区别

防抖和节流的区别在于：

  • 防抖的思路是：指定事件触发的函数在一定时间后执行，如果在这段时间内再次触发该事件，那么便取消上一次的执行。
  • 节流的思路是：指定事件触发的函数在一定时间后执行，如果在这段时间内再次触发该事件，那么便无视该次事件动作。