JS防抖和节流

JS防抖和节流

在某些场景下，我们可能会频繁触发某个事件或者函数，这时候就需要使用防抖和节流来控制这种情况的发生。

防抖

防抖是指在短时间内多次触发同一个函数，只执行最后一次，或者只在开始时执行一次。防抖的实现原理是设置一个定时器，每当触发事件时先清除之前的定时器，然后重新设置一个新的定时器，等待一定时间后执行函数。

function debounce(fn, delay) {
  let timer = null;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function() {
      fn.apply(context, args);
    }, delay);
  };
}

在实际应用中，防抖可以用于输入框搜索，窗口大小调整等场景。

节流

节流是指在一定时间内只执行一次函数。如果在规定的时间内又触发了该函数，则会忽略当前触发，并在下一个时间周期再次执行该函数。节流的实现原理是通过设置一个定时器，在规定时间到达之前，不管触发了多少次函数，都不会执行函数，直到定时器到期。

function throttle(fn, delay) {
  let timer = null;
  return function() {
    const context = this;
    const args = arguments;
    if (!timer) {
      timer = setTimeout(function() {
        fn.apply(context, args);
        timer = null;
      }, delay);
    }
  };
}

在实际应用中，节流可以用于滚动事件、点击按钮等触发频率较高的场景。

应用场景

防抖和节流是一种常见的优化方式，能够有效地控制某些操作的执行频率，增强页面的性能表现。下面是一些防抖和节流常见的应用场景：

防抖

• 输入框搜索
• 点击提交按钮
• 窗口大小调整

节流

• 滚动事件
• 点击按钮
• 鼠标移动