节流--自己写的函数

今天老师讲的节流, 大概意思是点击间隔时间必须三秒钟以上,三秒内的连续点击无效.

大体思路: 设定两个锁, 一个对应点击的触发函数fn, 一个对应定时器,防止定时器每次点击都会设定造成多个定时器篡改函数锁.

细节上就是把锁最好定为函数的属性,这样都对应一个.还有处理好this 和 e的问题.

我感觉老是的思路是获取时间间隔, 老是的思路比较直观. 定义一个两个变量, 每次点击记录时间点, 如果下次点击和这次间隔时间不符合时间间隔, 会不执行.

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9 </head>
10 
11 <body>
12     <span id='demo'>
13         1111
14     </span>
15 
16     <script>
17 
18         //点了后一秒钟之内不能再点击.
19         function jieLiu(fn, time) {
20             jieLiu.flag = true;
21             jieLiu.TimeoutFlag = true;
22             return function (e) {
23                 var that = this;
24                 var arg = Array.prototype.slice.call(arguments,0);
25                 if (jieLiu.flag) {
26                     jieLiu.flag = false;
27                     fn.apply(that,arg);
28                 }
29                 if (jieLiu.TimeoutFlag) { //定时器flag, 防止每次点击开启一个定时器. 刚开始我没用这个,点击第二次后达不到预期效果
30                     jieLiu.TimeoutFlag = false;
31                     setTimeout(function () {
32                         jieLiu.flag = true;
33                         jieLiu.TimeoutFlag = true;
34                     }, time)
35                 }
36             }
37         }
38 
39         var jl = jieLiu(function (e) { console.log(this,e.target) }, 3000);
40         demo.onclick = jl;
41     </script>
42 </body>
43 
44 </html>

        function jieLiu(fn, time) {
            var lastTime = 0;
            return function (e) {
                var nowTime = new Date().getTime();
                var that = this;
                if (nowTime - lastTime > time) {
                    lastTime = nowTime;
                    var arg = Array.prototype.slice.call(arguments, 0);
                    fn.apply(that, arg);
                }
            }
        }