防抖函数的实现

最新推荐文章于 2024-04-01 19:36:13 发布

doraemon960320

最新推荐文章于 2024-04-01 19:36:13 发布

阅读量712

点赞数

分类专栏： JavaScript基础文章标签： javascript

本文链接：https://blog.csdn.net/zl960320/article/details/119358579

版权

1.什么是防抖？防抖有什么作用？

带着这个问题，开始本篇讲述，一开始听防抖我也是蒙蒙的，今天又遇到了，记录一下。加深印象。

防抖就是当持续触发事件时，在一定时间内如果没有触发该事件，事件处理函数会执行一次，当在一定时间内触发该事件时，会清除定时器，只在最后执行一次。

这里有清除定时器，所以，防抖函数里需要使用定时器。

我们以输入框中输入内容为例，1s时间内在文本框中输入内容，如果1s内多次按下键盘按键，就清除定时器。直到1s时间到了之后输出最后结果。通俗讲，就是无论1s内按了多少次按键，都不会触发，只有到了1s之后，才会触发事件处理函数。

2.输入框案例实现防抖操作

<body>
<input type="text" class="input">
<script>
//1.首先获取元素
var ipt=document.querySelector('.ipt');
//2.在这里定义一个防抖函数
function debounce(delay,value){
    setTimeout(function(){
        console.log(value)
    },delay)
}
//3.给ipt添加键盘弹起事件
ipt.addEventListener('keyup',function(e){
    debounce(1000,e.target.value);
})
</script>
</body>

上述代码虽然写了防抖函数，里面设置了定时器，但是并没有清除定时器的

最低0.47元/天解锁文章

doraemon960320

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
防抖函数的实现

1.什么是防抖？防抖有什么作用？带着这个问题，开始本篇讲述，一开始听防抖我也是蒙蒙的，今天又遇到了，记录一下。加深印象。防抖就是当持续触发事件时，在一定时间内如果没有触发该事件，事件处理函数会执行一次，当在一定时间内触发该事件时，会清除定时器，只在最后执行一次。这里有清除定时器，所以，防抖函数里需要使用定时器。我们以输入框中输入内容为例，1s时间内在文本框中输入内容，如果1s内多次按下键盘按键，就清除定时器。直到1s时间到了之后输出最后结果。通俗讲，就是无论1s内按了多少次按键，都不会触发，
复制链接

扫一扫