js防抖和节流使用场景和区别和代码

1.防抖（在一连串连续的触发事件中，只执行最后一次触发的函数）

也就是说，如果在规定的时间间隔内再次触发了事件，防抖函数会取消之前的执行，并重新开始计时。这样可以避免在短时间内频繁执行函数，常用于处理按钮点击事件或输入框输入事件。

防抖函数：

javascript 复制代码

function debounce(func, delay) {
  let timerId;
  
  return function() {
    clearTimeout(timerId);
    
    timerId = setTimeout(() => {
      func.apply(this, arguments);
    }, delay);
  };
}

这个防抖函数接受两个参数：

func：要执行的函数。
delay：延迟的时间，单位为毫秒。

当调用防抖函数返回的函数时，它会清除之前的定时器，并在延迟时间后再次执行传入的函数。这样可以确保在延迟时间内，只有最后一次触发的事件会被执行。

你可以将需要防抖的函数作为参数传递给防抖函数，然后使用返回的函数来替代原始的事件处理函数。例如：

javascript 复制代码

function handleInput() {
  // 处理输入事件的逻辑
}

const debouncedHandleInput = debounce(handleInput, 300); // 创建防抖函数

inputElement.addEventListener('input', debouncedHandleInput); // 使用防抖函数作为事件处理函数

在上面的例子中，handleInput函数会被防抖处理，确保在用户输入时只有最后一次输入后的300毫秒才会触发处理逻辑。

2.节流（在一连串连续的触发事件中，每隔一定的时间间隔执行一次函数）

也就是说节流函数会在一连串连续的触发事件中，每隔一定的时间间隔执行一次函数。无论触发事件的频率有多高，节流函数都会按照设定的时间间隔执行一次函数。这样可以控制函数的执行频率，常用于处理滚动事件或鼠标移动事件。

节流函数：

javascript 复制代码

function throttle(func, delay) {
  let timerId;
  let lastExecTime = 0;
  
  return function() {
    const currentTime = Date.now();
    
    if (currentTime - lastExecTime < delay) {
      clearTimeout(timerId);
      
      timerId = setTimeout(() => {
        lastExecTime = currentTime;
        func.apply(this, arguments);
      }, delay);
    } else {
      lastExecTime = currentTime;
      func.apply(this, arguments);
    }
  };
}

这个截流函数接受两个参数：

func：要执行的函数。
delay：时间间隔，单位为毫秒。

当调用截流函数返回的函数时，它会根据时间间隔来判断是否执行传入的函数。如果距离上次执行的时间小于时间间隔，则会清除之前的定时器，并在时间间隔后再次执行传入的函数。如果距离上次执行的时间大于等于时间间隔，则立即执行传入的函数。

你可以将需要截流的函数作为参数传递给截流函数，然后使用返回的函数来替代原始的事件处理函数。例如：

javascript 复制代码

function handleScroll() {
  // 处理滚动事件的逻辑
}

const throttledHandleScroll = throttle(handleScroll, 300); // 创建截流函数

window.addEventListener('scroll', throttledHandleScroll); // 使用截流函数作为事件处理函数

在上面的例子中，handleScroll函数会被截流处理，确保在滚动事件触发时，最多每300毫秒执行一次处理逻辑。