loadash-debounce(防抖动)

loadash-debounce(防抖动)

ooo__A_A__ooo

于 2019-09-27 17:31:34 发布

1244
收藏 1
分类专栏: js
版权

js
专栏收录该内容
18 篇文章0 订阅
订阅专栏
抖动现象常见的场景有页面滚动事件,输入框input事件,页面resize事件等等

maxWait 保证在 所书写的时间内会执行1次
leading 指定在延迟开始前调用
trailing 指定在延迟结束后调用

下面代码,在10s内连续点击会打印四次

1.第一个三秒 打印一次
2.第二个三秒 打印一次
3.第三个三秒 打印一次
4.最后一秒 打印一次

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id='btn'>按钮</button>
<script src="./jquery.min.js" type='text/javascript'></script>
<script src="./loadash.min.js" type='text/javascript'></script>
<script>
$('#btn').on('click',_.debounce(function(){
console.log('我被点击了。。。')
},1000,{
'leading': true, // 指定在延迟开始前调用
'trailing': false, // 指定在延迟结束后调用
'maxWait': 3000, // 保证在此时间内会触发1次
}));
</script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
参考于:
实例解析防抖动(Debouncing)和节流阀(Throttling)
loadash官方参考文档
————————————————
版权声明:本文为CSDN博主「ooo__A_A__ooo」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_45152848/article/details/101547030

posted on 2022-04-07 16:56  漫思  阅读(234)  评论(0编辑  收藏  举报

导航