手写代码——节流和防抖的奥妙

前端

2023-10-29 05:36:56

揭秘前端开发中的节流与防抖

简介

在前端开发中，优化事件处理至关重要。节流和防抖是两项强大的技术，可以帮助我们限制回调函数在短时间内的执行次数，从而提升性能和用户体验。

节流：控制狂魔

想象一下你正在滚动一个长长的页面，每当你滚动页面时，浏览器就会触发一个滚动事件。如果在滚动过程中，你的回调函数疯狂执行，这会给浏览器带来巨大的负担，导致页面卡顿。

节流就像一个控制狂，它说："慢点，伙计！别这么快。"它规定在指定的等待时间内，回调函数只能执行一次。这样一来，即使你狂按鼠标，回调函数也不会发疯似的乱跑。

如何实现节流？

使用节流函数，我们可以指定一个等待时间（以毫秒为单位），然后将其应用于我们的回调函数。当事件触发时，节流函数会设置一个计时器。如果在此计时器到期之前再次触发事件，则会重置计时器。只有当计时器到期时，回调函数才会执行。

// 节流函数
function throttle(func, wait) {
  let timeout = null;
  return function() {
    const context = this;
    const args = arguments;
    if (!timeout) {
      timeout = setTimeout(() => {
        func.apply(context, args);
        timeout = null;
      }, wait);
    }
  };
}

防抖：延迟执行者

防抖有点像一个懒汉，它说："等等，让我先缓一缓。"它会延迟回调函数的执行，直到事件停止触发为止。换句话说，它等待一段时间，看看事件是否还会继续发生。如果事件不再发生，防抖函数就会调用回调函数。

如何实现防抖？

使用防抖函数，我们同样需要指定一个等待时间（以毫秒为单位）。当事件触发时，防抖函数会设置一个计时器。如果在这个计时器到期之前再次触发事件，则会重置计时器。只有当计时器到期后，回调函数才会执行。

// 防抖函数
function debounce(func, wait) {
  let timeout = null;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(context, args);
    }, wait);
  };
}