防抖 和 节流 简单代码

防抖函数的简单代码实现如下所示：

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

节流函数的简单代码实现如下所示：

export function throttle(fn, interval) {
  let last;
  let timer;
  return function() {
    const now = new Date();
    if (last && now - last < interval) {
      clearTimeout(timer);
      timer = setTimeout(() => {
        last = now;
        fn.apply(this, arguments);
      }, interval);
    } else {
      last = now;      fn.apply(this, arguments);
    }
  };
}

相关问题

js防抖和节流的实现

JS中的防抖函数和节流函数是常用的函数优化方法，可以有效控制函数的执行频率和执行时间间隔。

防抖函数的实现可以使用闭包和定时器来实现。通过在函数执行前先清除之前的定时器，然后设置一个新的定时器来延迟函数的执行。如果在指定的时间内再次触发函数，则清除之前的定时器重新设置新的定时器，以此来达到延迟函数执行的效果。下面是一个防抖函数的示例代码：

function debounce(fn, delay) {
  var timer = null;
  return function () {
    if (timer) clearTimeout(timer);
    timer = setTimeout(function () {
      fn();
    }, delay);
  }
}

节流函数的实现可以使用定时器和时间戳来实现。在函数的执行过程中，通过判断当前的时间戳与上次执行的时间戳的差值来控制函数的执行频率。如果距离上次执行的时间超过指定的时间间隔，则执行函数，并更新上次执行的时间戳。下面是一个节流函数的示例代码：

function throttle(fn, delay) {
  var lastTime = 0;
  return function () {
    var currentTime = Date.now();
    if (currentTime - lastTime >= delay) {
      fn();
      lastTime = currentTime;
    }
  }
}

防抖函数适用于在连续触发事件时，只在最后一次触发事件后执行一次函数，常用于输入框的输入事件等场景。节流函数适用于在连续触发事件时，按照指定的时间间隔执行函数，常用于滚动事件、窗口大小改变事件等场景。

以上是防抖函数和节流函数的简单实现和应用场景的介绍，希望对您有所帮助。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [JavaScript 防抖和节流的实现](https://blog.csdn.net/weixin_43853746/article/details/122654312)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [JS函数节流和防抖之间的区分和实现详解](https://download.csdn.net/download/weixin_38622962/12947757)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]

帮我写一篇防抖节流代码

防抖和节流是前端中常用的优化性能的技术，可以有效地降低浏览器的负荷。这里将简单介绍防抖和节流的概念，并提供几个示例代码，以供参考。

一、防抖

防抖（debounce）是指在一定时间内，多次触发同一个事件，只执行最后一次，以达到限制函数执行频率的目的。也就是说，防抖能够限制函数的执行次数，可以避免在短时间内频繁触发同一个事件导致程序崩溃。

1.1 示例代码

// debounce函数实现
function debounce(func, wait) {
let timeout;
return function() {
const context = this;
const args = arguments;
clearTimeout(timeout);
timeout = setTimeout(function() {
func.apply(context, args);
}, wait);
};
}
// 防抖函数使用示例
function handle() {
console.log("scroll");
}
window.addEventListener("scroll", debounce(handle, 1000));

1.2 解释

在上述代码中，我们定义了一个debounce函数，并传入两个参数：一个是要执行的函数func，另一个是需要限定的事件触发时间wait。在这里我们使用了setTimeout函数，它会在wait毫秒后执行我们的func函数，如果再次触发事件，我们会使用clearTimeout()方法清除上一次执行的定时器，从而达到限制函数执行的目的。

二、节流

节流(throttle)是指在一段时间内，多次触发同一个事件，只执行一次，以达到限制函数执行次数的目的。不同于防抖，它可以使得函数定期执行，而不是一直等待到事件停止触发再执行。

2.1 示例代码

// throttle函数实现
function throttle(func, wait) {
let timeout;
let canRun = true;
return function() {
if (canRun) {
canRun = false;
func.apply(this, arguments);
timeout = setTimeout(() => {
canRun = true;
}, wait);
} else {
clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(this, arguments);
canRun = true;
}, wait);
}
};
}
// 节流函数使用示例
function handle() {
console.log("scroll");
}
window.addEventListener("scroll", throttle(handle, 1000));

2.2 解释

在上述代码中，我们定义了一个throttle函数，并传入了两个参数：一个是要执行的函数func，另一个是需要限定的事件触发时间wait。在这个函数中，我们使用了canRun变量来控制函数可以执行的时间，在一个wait时间内，该变量的值为false，表示函数正在执行中，不会执行第二次。当wait时间过去后，我们才会将canRun设为true，允许函数再次被触发。如果在wait时间内再次触发事件，则会重置定时器，并再次等待wait时间后执行函数。

综上所述，防抖和节流是前端中常用的技术，可以避免频繁触发同一个事件而导致程序崩溃，提高页面性能和用户体验。在实际开发中，我们需要根据具体情况选择合适的方法来进行优化，以达到最佳的效果。