防抖（debounce）
    所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

    完整代码

    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.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7.     <title>Document</title>
    8. </head>
    9. <body>
    10.     <button id="btn">按钮</button>
    11.     <script>
    12.     //  只针对最后一次输入触发
    13.         var timer
    14.         var btn = document.getElementById("btn");
    15.         btn.onclick = function(){
    16.             // if(timer){
    17.             //     clearTimeout(timer)
    18.             // }
    19.             // timer = setTimeout(function(){
    20.             //     console.log(1)
    21.             // },1000)
    22.             debounce(()=>{
    23.                 console.log(1)
    24.             },1000)
    25.         }
    26.         function debounce(fn,time){
    27.             if(timer){
    28.                 clearTimeout(timer)
    29.             }
    30.             timer = setTimeout(fn,time)
    31.         }
    32.     </script>
    33. </body>
    34. </html>

    test.gif

    ps：
    节流（throttle）
    所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。