今天老师讲的节流, 大概意思是点击间隔时间必须三秒钟以上,三秒内的连续点击无效.
大体思路: 设定两个锁, 一个对应点击的触发函数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); } } }