节流 和 防抖 啥意思 用JavaScript举个例子

节流和防抖是解决JavaScript中高频率事件触发的优化方法。

节流（throttling）: 意思是在一定时间内只允许事件触发一次，超过这个时间间隔的触发将被忽略。

例如:

function handleScroll() {
  console.log("scroll event fired!");
}

var throttle = function (fn, delay) {
  var lastCall = 0;
  return function () {
    var now = new Date().getTime();
    if (now - lastCall < delay) {
      return;
    }
    lastCall = now;
    return fn.apply(this, arguments);
  };
};

window.addEventListener("scroll", throttle(handleScroll, 1000));

上面的例子中，每次滚动事件触发时，handleScroll函数只会在1000毫秒内执行一次。

防抖（debouncing）: 意思是在事件触发后，延迟一定时间执行事件处理函数，如果在延迟时间内再次触发事件，则重新延迟。

例如:

function handleResize() {
  console.log("resize event fired!");
}

var debounce = function (fn, delay) {
  var timer = null;
  return function () {
    clearTimeout(timer);
    timer = setTimeout(fn, delay);
  };
};

window.addEventListener("resize", debounce(handleResize, 1000));

上面的例子中，每次窗口大小改变时，handleResize函数会在1000毫秒后执行一次，如果在1000毫秒内再次触发了resize事件，则重新延迟。