JavaScript防抖和节流函数代码怎么写

JavaScript防抖和节流是Web开发中非常重要的常用技巧。防抖用于防止高频率触发事件导致的过度计算，而节流则用于限制事件的触发频率，从而提高性能。下面我将详细解释防抖和节流的原理，并提供两个常用的代码示例。 ### 1. 防抖 防抖是一种在高频率事件触发后延迟执行的技术。它用于仅在事件停止触发一段时间后才执行代码。比如说，当用户持续输入某些关键词时，我们可能希望在用户停止输入后调用一个API来进行搜索。换言之，防抖适用于需要等待用户完成输入或停止操作后再执行操作的情况。以下是一个使用防抖技术的示例代码：

防抖函数代码示例

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

在这个代码中，我们定义了一个名为“debounce”的函数，它接受两个参数：要执行的函数“fn”以及在延迟执行之前等待的时间“delay”。然后我们定义了一个“timer”变量来存储定时器的ID，并在每次函数被调用时检查它是否存在。如果是，则使用“clearTimeout”函数来清除定时器，并在函数调用之前重新设置新的定时器。这样以来，我们就可以保证函数只有在最后一次被调用后才会被执行。 ### 2. 节流 节流是一种在高频率事件触发时限制函数调用次数的技术。它用于限制事件的触发频率，从而提高性能。比如说，我们可能希望在用户不断地滚动页面时延迟一段时间并仅触发一次滚动事件。节流通常用于需要限制函数执行频率的情况，比如说等待某个事件的完成、避免DOM元素过度更新等。以下是一个使用节流技术的示例代码：

节流函数代码示例

function throttle(fn, delay) {
  let timer = null;
  let last = 0;
  return function() {
    let args = arguments;
    let that = this;
    let now = new Date().getTime();
    if (now - last < delay) {
      if (timer) {
        clearTimeout(timer);
      }
      timer = setTimeout(() => {
        last = now;
        fn.apply(that, args);
      }, delay - (now - last));
    } else {
      last = now;
      fn.apply(that, args);
    }
  };
}

在这个代码中，我们定义了一个名为“throttle”的函数，它接受两个参数：“fn”是要执行的函数，而“delay”则是函数调用的最小时间间隔。然后我们定义了一个“timer”变量来存储定时器的ID，并使用“last”变量来存储上一次函数被调用的时间戳。在函数调用时，我们检查当前时间戳与上一次时间戳之间的时间间隔是否大于等于“delay”。如果是，则立即调用该函数，否则等待一段时间再调用该函数。 综上所述，防抖和节流是Web开发中常用的技巧，它们可以帮助我们避免过度计算，提高性能。上述的两个函数示例可以在许多场景中使用，我们可以根据实际需求调整其中的延迟时间和限制条件，以达到适合我们的目的。