函数防抖（debounce）：
    当持续触发事件时，一定事件段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。

    “函数防抖”的关键在于：在一个动作发生一定事件之后，才执行特定的事件。

    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.     <style>
    9.       #content {
    10.           width: 200px;
    11.           height: 200px;
    12.           background-color: gray;
    13.           margin: 100px;
    14.           color: black;
    15.           padding: 50px;
    16.           font-size: 56px;
    17.       }
    18.     </style>
    19. </head>
    20. <body>
    21.     <div id="content">
    23.     </div>
    24.     <script>
    25.         var num = 0;
    26.         var content = document.getElementById("content");
    28.         var changeNum = function(){
    29.             num++;
    30.             content.innerHTML = num;
    31.         }
    33.         var debounce = function(func, delay){
    34.             var timer;
    36.             return function(...args){
    37.                 if (timer) {
    38.                     clearTimeout(timer);
    39.                 }
    41.                 // 第一版
    42.                 // timer = setTimeout(function(){
    43.                 //     // timeout的this是window，但实际上应该是content元素
    44.                 //     func();
    45.                 // }, delay);
    47.                 // 第二版，使用箭头函数的特性
    48.                 //  箭头函数没有this作用域，他的this来自作用域链，也没有arguments
    49.                 timer = setTimeout(() => {
    50.                     console.log(this);
    51.                     func(...args);
    52.                 }, delay);
    55.             };
    56.         };
    58.         content.onmouseover = debounce(changeNum, 500);
    60.     </script>
    61. </body>
    62. </html>

    函数节流（throttle）：
    当持续触发事件时，保证一定时间段内只调用一次事件处理函数。

    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="btn1">点击</button>
    11.     <script>
    12.         let btn1 = document.getElementById('btn1');
    14.         let fn = () => {
    15.            console.log('我被点击了');
    16.         };
    18.         let throttle = function(func, delay) {
    19.             var flag = true;
    21.             return function(...args){
    22.                 if(!flag) {
    23.                     return;
    24.                 }
    26.                 flag = false;
    27.                 setTimeout(()=>{
    28.                     func(args);
    29.                     flag = true;
    30.                 },delay);   
    31.             };
    32.         };
    34.         btn1.onclick = throttle(fn, 2000);
    35.     </script>
    36. </body>
    37. </html>

    有可以使用时间戳来实现。