给 JavaScript 开发者的事件处理技巧——防抖与节流

前端

2023-12-04 00:48:01

初识防抖与节流

在日常开发中，我们经常会遇到这样的场景：用户在文本框中输入内容时，需要实时进行搜索或自动完成。如果我们不加以限制，用户每输入一个字符就会触发一次搜索或自动完成请求，这不仅会给服务器带来巨大的压力，还会导致浏览器卡顿，极大地影响用户体验。

为了解决这个问题，我们可以使用防抖或节流来对事件处理函数的调用进行限制，从而在保证用户体验的前提下提高性能。

防抖：延迟执行

防抖的原理是：如果在规定时间内事件被触发多次，那么只执行一次事件处理函数。具体来说，当事件第一次触发时，会启动一个计时器，如果在计时器到期之前事件再次触发，那么计时器就会重新启动，直到计时器到期后才会执行事件处理函数。

防抖最典型的应用场景就是搜索框的自动完成功能。用户在输入时，防抖可以防止每一次按键都触发搜索请求，从而减轻服务器压力，提高用户体验。

节流：限制执行频率

节流的原理是：在规定时间内，事件处理函数最多只执行一次。具体来说，当事件第一次触发时，会立即执行事件处理函数，然后在规定时间内禁止执行事件处理函数，直到规定时间过后，事件处理函数才能再次执行。

节流最典型的应用场景就是窗口大小改变事件的处理。当用户拖动浏览器窗口时，窗口大小改变事件会不断触发。如果我们不加以限制，那么浏览器会不断重新渲染页面，导致页面卡顿。此时，我们可以使用节流来限制窗口大小改变事件的处理频率，从而提高页面的响应速度。

如何实现防抖与节流

在JavaScript中，我们可以使用函数闭包和定时器来实现防抖与节流。

防抖实现

function debounce(func, delay) {
  let timer;
  return function(...args) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

节流实现

function throttle(func, delay) {
  let lastTime = 0;
  return function(...args) {
    const now = new Date().getTime();
    if (now - lastTime < delay) return;
    lastTime = now;
    func.apply(this, args);
  };
}