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>