掌握手写JS防抖函数和节流函数，驾驭高效编程

2023-10-03 04:57:37

驾驭高效编程：手写JS防抖函数和节流函数

在前端开发中，我们经常会遇到需要处理高频触发的事件，例如滚动、鼠标移动、输入框输入等。如果我们对这些事件进行无节制的处理，很可能会导致性能问题和用户体验不佳。为了解决这个问题，我们可以使用防抖和节流技术来控制函数的调用频率，从而提高性能和用户体验。

理解防抖和节流

防抖和节流都是用来控制函数调用频率的技术，但它们的工作原理和应用场景有所不同。

防抖： 防抖函数在一段时间内只执行一次，即使在该段时间内函数被多次触发。
节流： 节流函数在一段时间内只执行一次，但它会在该段时间内累积多次触发，并在该段时间结束后执行一次。

实现手写JS防抖函数

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

实现手写JS节流函数

function throttle(func, wait) {
  let lastCall = 0;
  return function() {
    const context = this;
    const args = arguments;
    const now = Date.now();
    if (now - lastCall >= wait) {
      lastCall = now;
      func.apply(context, args);
    }
  };
}

应用场景

防抖：
- 搜索框输入：在用户输入时，防抖函数可以防止搜索请求过于频繁，从而提高性能和用户体验。
- 窗口滚动事件：在用户滚动窗口时，防抖函数可以防止滚动事件过于频繁触发，从而提高性能和用户体验。
节流：
- 鼠标移动事件：在用户移动鼠标时，节流函数可以防止鼠标移动事件过于频繁触发，从而提高性能和用户体验。
- 窗口大小改变事件：在用户改变窗口大小时，节流函数可以防止窗口大小改变事件过于频繁触发，从而提高性能和用户体验。