节流 

 1 <!--
 2  * @Author: your TM_cc
 3  * @Date: 2021-10-31 19:10:34
 4  * @LastEditTime: 2021-10-31 19:15:51
 5  * @LastEditors: Please set LastEditors
 6  * @Description: In User Settings Edit
 7  * @FilePath: \节流.html
 8 -->
 9 <!DOCTYPE html>
10 <html lang="en">
11 <head>
12     <meta charset="UTF-8">
13     <meta http-equiv="X-UA-Compatible" content="IE=edge">
14     <meta name="viewport" content="width=device-width, initial-scale=1.0">
15     <title>节流-Throttling</title>
16 </head>
17 <body>
18 
19     <button id="button">节流</button>
20 
21     <script>
22 
23         function Throttling(func,wait){
24             let timeout;
25             return function () {
26                 if (!timeout){
27                     timeout = setTimeout(function () {
28                         func()
29                         timeout = null;
30                     },wait)
31                 }
32             }
33         }
34 
35         function handle(){
36             console.log(Math.random())
37         }
38 
39         document.getElementById('button').onclick = Throttling(handle,2000)
40 
41         //  点击两秒后显示一个随机数，两秒内不论点击多少次都不会在此产生一个随机数
42 
43     </script>
44 </body>
45 </html>

 

posted @ 2021-10-31 19:19  TM_cc  阅读(46)  评论(0)    收藏  举报