javascript疑难问题---13、函数防抖

转载

mob604756e78484 2020-03-19 13:26:00

文章标签 javascript疑难问题微信人工智能 html 点击事件 文章分类 代码人生

javascript疑难问题---13、函数防抖

一、总结

一句话总结：

防抖函数就是一个会频繁触发的函数，在规定的时间内，只让最后一次生效，前面的不生效。算法思路就是在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

1、防抖函数的作用？

防止用户的重复（手抖）操作

2、防抖函数适用的场景？

用户点击事件，比如做题按钮提交等等

二、函数防抖

javascript疑难问题---13、函数防抖_点击事件

1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>函数防抖</title>
 6 </head>
 7 <body>
 8 <!--
 9 1、
10 防抖函数：
11 一个会频繁触发的函数，在规定的时间内，只让最后一次生效，前面的不生效
12 
13 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
14 
15 2、
16 作用：
17 防止用户的重复（手抖）操作
18 
19 3、
20 适用场景：
21 用户点击事件，比如做题按钮提交
22 
23 4、
24 函数防抖在实际项目中的应用
25 
26 5、
27 思考：
28 如果用户一直点的话，这个函数是不会执行的，大象想想为什么
29 
30 
31 
32 -->
33 <button id="btn">btn</button>
34 <script>
35 
36     //在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
37     //计时器 setTimeOut
38     /**
39      * 1、函数防抖
40      * @param fn 要执行的回调函数
41      * @param delay 时间延迟
42      */
43     function debounce(fn,delay) {
44         //定义一个计时器
45         var timer=null;
46         return function(){
47             clearTimeout(timer);
48             timer=setTimeout(function () {
49                 //fn();
50                 fn.call(this);
51             },delay);
52         };
53     }
54     document.getElementById('btn').onclick=debounce(function () {
55         console.log('btn按钮被点击了： '+Date.now());
56     },1500);
57 </script>
58 </body>
59 </html>