微信扫一扫打赏支持

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

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

一、总结

一句话总结：

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

 

1、防抖函数 的作用？

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

 

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

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

 

 

 

二、函数防抖

博客对应课程的视频位置：13、函数防抖
https://www.fanrenyi.com/video/4/178

 

 

 

 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>

 

 

 

 
posted @ 2020-03-19 13:26  范仁义  阅读(124)  评论(0)  编辑  收藏  举报