JavaScript防抖与节流超详细全面讲解

一、什么是防抖与节流

防抖(debouncing)和节流(throttling)解决的是高频触发事件的性能问题。事件被触发多次，但是实际上我们只需要在事件停止触发之后才进行一次处理，或者减少事件的触发次数。

防抖是指在短时间内多次触发同一个事件，只执行最后一次，或者只在连续触发事件后停止一段时间后再执行。比如在输入框中使用防抖可以减少实时搜索时请求的次数。

节流是指一定时间内只执行一次任务，或者每隔一定时间才执行一次任务。比如页面滚动时加载图片，为了减轻服务器压力，可以将滚动事件改成每200ms执行一次。

二、防抖与节流的实现

1. 防抖的实现

防抖可以使用定时器实现，当事件触发时清除已有的定时器并重新设定一个新的定时器，在一定的时间间隔内没有再次触发事件时，即认为事件停止触发，执行事件处理函数。防抖可以使用JavaScript闭包来实现。

function debounce(fn, delay) {
  let timer = null;

//返回一个防抖函数
  return function() {
    let context = this;
    let args = arguments;

    //清除之前的定时器并重新设定一个新的定时器
    clearTimeout(timer);
    timer = setTimeout(function() {
      fn.apply(context, args);
    }, delay);
  };
}

使用示例：

function search(query) {
  console.log(`searching for ${query}`);
}

let debounceSearch = debounce(search, 500);

//实时搜索
let input = document.getElementById('search-input');
input.addEventListener('keyup', function() {
  debounceSearch(input.value);
});

2. 节流的实现

节流可以采用两种方案：使用定时器实现和使用时间戳实现。

使用定时器实现时，当事件触发后设定定时器，在定时器到期后执行事件处理函数，如果在定时器到期之前又触发了事件，则重设定时器，并重新计时。

使用时间戳实现时，当事件触发后，计算距离上次事件的时间是否超过了规定的时间间隔，如果超过了规定的时间间隔，则执行事件处理函数并更新上次事件的时间戳。

下面是使用定时器实现节流的代码：

function throttle(fn, delay) {
  let timer = null;

  return function() {
    let context = this;
    let args = arguments;

    //使用定时器实现节流
    if (!timer) {
      timer = setTimeout(function() {
        fn.apply(context, args);
        timer = null;
      }, delay);
    }
  };
}

使用示例：

function loadImage() {
  console.log('loading image');
}

let throttleLoadImage = throttle(loadImage, 200);

window.addEventListener('scroll', throttleLoadImage);

三、防抖与节流的应用场景

1. 防抖的应用场景

实时搜索、拖拽改变窗口大小，网络请求等。

例如实现实时搜索：

function search(query) {
  console.log(`searching for ${query}`);
}

let debounceSearch = debounce(search, 500);

//实时搜索
let input = document.getElementById('search-input');
input.addEventListener('keyup', function() {
  debounceSearch(input.value);
});

2. 节流的应用场景

页面滚动事件、窗口大小改变事件、高频点击事件等。

例如优化窗口大小改变事件：

function resize() {
  console.log('window resized');
}
let throttleResize = throttle(resize, 200);

window.addEventListener('resize', throttleResize);