JS如何避免重复性触发操作

btn的click事件，每次点击都会执行给定的function，如果function复杂的话，很容易消耗内存

解决方法——setTimeout延时处理。

给function做延迟处理，比如600毫秒后执行，如果在600毫秒内再次触发方法，则将之前的timeout清除。

代码如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6   <title>Document</title>
 7   <style>
 8     .box{
 9       width: 800px;
10       height: 500px;
11       overflow: auto;
12       margin: 20px auto;
13       background-color: #ccc;
14       border: 1px solid #ccc;
15       border-radius: 10px;
16       padding: 5px;
17     }
18     .btn{
19       width: 200px;
20       height: 50px;
21       line-height: 50px;
22       background-color: #f00;
23       margin: 20px auto;
24       text-align: center;
25       user-select: none;
26       color: #fff;
27     }
28   </style>
29 </head>
30 <body>
31   <div class='box'>
32     <div class='btn' id='oBtn'>click</div>
33   </div>
34 </body>
35 <script type='text/javascript'>
36   let isr = false  //判断是否在600毫秒内再次触发
37   let timer = null  //计时器
38   let oBtn = document.getElementById('oBtn')
39   oBtn.onclick = function () {
40     if (isr) {
41       clearTimeout(timer)
42     } else {
43       isr = true
44     }
45     timer = setTimeout(function () {
46       console.log('change')
47     }, 600)
48   }
49 </script>
50 </html>