js实现一个简单的函数防抖，可以根据传入的时间进行防抖

最新推荐文章于 2024-03-21 11:45:40 发布

坚书直实i

最新推荐文章于 2024-03-21 11:45:40 发布

阅读量231

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_48674314/article/details/130774221

版权

该文章介绍了一个JavaScript实现的防抖(debounce)函数，用于限制函数的执行频率。在给定的时间间隔内，只有最后一次调用会被执行。文章通过示例展示了如何使用防抖函数优化频繁触发的回调，如myCallback，以提高性能。

摘要由CSDN通过智能技术生成

下面是一个简单的例子：根据传入的时间 t 来防抖：

function debounce(func, t) {
  let timeoutId;

  return function (...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, t);
  };
}

这个函数接收两个参数：func 是需要进行防抖的函数，t 是防抖的时间间隔（以毫秒为单位）。

在内部，我们使用一个变量 timeoutId 来存储 setTimeout 的返回值。每当防抖函数被调用时，我们先清除之前的定时器（如果有的话），然后创建一个新的定时器，延迟 t 毫秒后执行传入的函数。

使用这个函数防抖可以确保在指定的时间间隔内只有最后一次调用会被执行，之前的调用会被取消。

例如，使用 debounce 函数对一个回调函数进行防抖：

function myCallback() {
  console.log('Debounced callback');
}

const debouncedCallback = debounce(myCallback, 200);

// 调用防抖函数
debouncedCallback(); // 200ms 后输出 "Debounced callback"
debouncedCallback(); // 取消前一次调用，重新计时 200ms
debouncedCallback(); // 取消前一次调用，重新计时 200ms