js防抖实验

最新推荐文章于 2020-05-18 15:56:22 发布

霉鼓励

最新推荐文章于 2020-05-18 15:56:22 发布

阅读量123

点赞数

文章标签： js 防抖

本文链接：https://blog.csdn.net/weixin_41411644/article/details/97939697

版权

能够无限制的触发事件，是件很危险的事情。
为了解决这个问题，其中一个解决方案就是防抖。

单纯的点击触发事件代码如下

<body>
	 <button id="demo">按我</button>
</body>
<script>
function handle(){
    console.log('触发');
}

// 绑定点击事件
var r = document.getElementById('demo');
r.addEventListener('click', handle); //注意这里handle函数是不加括号的，加括号为函数的返回结果
</script>

能够无限制的触发着实令人不太舒服哩。

防抖版代码如下：

<body>
    <button id="demo">按我</button>
</body>
<script>
//触发函数
function handle(){
    console.log('触发');
}
//防抖函数
function debounce() {    
    var t = null;
    return function(){
        if(t !== null) clearTimeout(t);   //不断点击不断触发，不断取消定时操作
        t = setTimeout(handle, 300);
    }
}
// 点击事件
var r = document.getElementById('demo');
r.addEventListener('click', debounce());   // 触发的为return的函数~~
</script>

现在这样就可以啦~

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

霉鼓励

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js防抖实验

能够无限制的触发事件，是件很危险的事情。为了解决这个问题，其中一个解决方案就是防抖。代码如下<body> <button id="demo">按我</button> </body><script>function fun(){ console.log('触发');}// 滚动事件var r =...
复制链接

扫一扫