js学习-防抖函数

最新推荐文章于 2024-10-09 00:58:21 发布

霸气灬剑意

最新推荐文章于 2024-10-09 00:58:21 发布

阅读量83

点赞数 1

分类专栏： js学习文章标签： javascript

本文链接：https://blog.csdn.net/qq_43762607/article/details/115639315

版权

js学习专栏收录该内容

13 篇文章 1 订阅

订阅专栏

本文介绍了JavaScript中的防抖函数(debounce)原理，通过一个简单的实现示例展示了如何创建防抖函数，以及如何在事件处理程序中使用它，如在输入框的keydown事件中，以防止频繁调用处理函数。防抖函数通过限制函数的实际执行频率，在用户停止触发事件后一段时间内如果没有再次触发，才执行一次函数。这种技术常用于优化性能，例如在搜索框输入时限制搜索请求的发送频率。

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

防抖函数

当持续触发事件一定时间内没有再触发事件事件处理函数才会执行一次如果设定的时间到来之前又一次触发了事件就重新开始延时。
触发事件一段时间内没有触发事件执行肯定是定时器。
(在设定的时间内又一次触发了事件重新开始延时代表的就是重新开始定时器)
(那么意味着上一次还没有结束的定时器要清除掉重新开始)
代码：

<input type="text" id="input">
<script>
 // 简单的防抖动函数
 function debounce(wait,callback) {
     let timeout;  // 定时器变量
     return function(val) {
         clearTimeout(timeout);  // 每次触发时先清除上一次的定时器,然后重新计时
         timeout = setTimeout(function(){
             callback(val)
         },wait);  // 指定 wait ms 后触发真正想进行的操作 callback
     };
 }
 //事件处理程序
 function realFunc(val){
     console.log(val);
 }
 var debounceFunc=debounce(2000,realFunc)
 const input = document.getElementById('input');
 input.addEventListener('keydown',function(e){debounceFunc(e.target.value)} );
 //input.addEventListener('keydown',realFunc);
</script>