1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 </head>
9 <body>
10 <button id="btn">定時器</button>
11 </body>
12 <script src="../js/debounce2.js"></script>
13 </html>
debounce2.js
1 /*
2 函數的防抖（防止老年帕金森）：對于頻繁觸發某個操作，我們隻識别一次（隻觸發執行一次函數）
3 @params
4 func[function]:最後要觸發執行的函數
5 wait[number]:"頻繁"設定的界限
6 immediate[boolean]:預設多次操作，我們識别的是最後一次，但是immediate=true,讓其識别第一次
7 @return
8 可以被調用執行的函數
9
10 主體思路：在目前點選完成後，我們等wait這麼長的時間，看是否還會觸發第二次，如果沒有觸發第二次
11 屬于非頻繁操作，我們直接執行想要的執行的函數func，如果觸發了第二次，則以前的不算了，從目前這
12 次在開始等待.....
13 */
14 function debounce(func, wait = 300, immediate = false) {
15 var timer = null;
16 return function anonymous(...params) {
17 let now = immediate && !timer;
18
19 //每次點選都把設定的定時器清除
20 clearTimeout(timer);
21
22 //重新設定一個新的定時器監聽wait時間内是否觸發第二次
23 timer = setTimeout(() => {
24 //手動讓其回歸到初始狀态
25 timer = null;
26
27 //wait 這麼久的等待中，沒有觸發第二次
28 !immediate ? func.call(this, ...params) : null;
29 }, wait);
30
31 //如果是立即執行
32 now ? func.call(this, ...params) : null;
33 };
34 }
35
36 /*
37 函數節流：在一段頻繁的操作中，可以觸發多次，但是觸發的頻率由自己決定
38 @params
39 func[function]:最後要觸發執行的函數
40 wait[number]:"頻繁"設定的界限
41 @return
42 可以被調用執行的函數
43 */
44
45 //節流1
46 function throttle(func, wait = 300) {
47 let timer = null,
48 previous = 0; //記錄上一次的操作時間
49 return function anonymous(...params) {
50 let now = new Date(),
51 remaining = wait - (now - previous); //記錄還差多久達到我們一次觸發的頻率
52 if (remaining <= 0) {
53 //兩次操作的時間間隔超過wait了
54 clearTimeout(timer);
55 timer = null;
56 previous = now;
57 func.call(this, ...params);
58 } else if (!timer) {
59 //兩次操作的時間還不符合觸發的頻率
60 timer = setTimeout(() => {
61 timer = null;
62 previous = new Date();
63 func.call(this, ...params);
64 }, remaining);
65 }
66 };
67 }
68
69 //節流2
70 function throttle2(func, wait=300) {
71 var begin = 0;
72 return function () {
73 var cur = new Date().getTime();
74 if (cur - begin > wait) {
75 func.apply(this, arguments)
76 begin = cur;
77 }
78 }
79 }
80
81 function fun() {
82 console.log("定時器執行");
83 }
84
85 btn.onclick = throttle(fun, 1000);
