1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>函数的防抖和节流</title>
    6.     <!-- IMPORT CSS -->
    7.     <link rel="stylesheet" href="css/reset.min.css">
    8.     <style>
    9.         html,
    10.         body {
    11.             height: 500%;
    12.             background: -webkit-linear-gradient(top left, lightblue, lightgreen, lightyellow, orange);
    13.         }
    14.     </style>
    15. </head>
    16. <body>
    17.     <script src="node_modules/underscore/underscore.js"></script>
    18.     <script>
    19.         /*
    20.          * https://underscorejs.org/  JS类库（提供很多项目中需要经常使用的方法）
    21.          * 
    22.          * 函数的防抖（debounce）：不是某个事件触发就去执行函数，而是在指定的时间间隔内，执行一次，减少函
    23.      数执行的次数 
    24.          * 
    25.          * 函数的节流（throttle）：为了缩减执行的频率，但不像防抖一样，一定时间内只能执行一次，而是一定时
    26.      间内能执行多次
    27.          */
    29.         /*
    30.          * debounce:函数防抖
    31.          *   @params
    32.          *      func:要执行的函数
    33.          *      wait:间隔等待时间
    34.          *      immediate:在开始边界还是结束边界触发执行(TRUE=>在开始边界)
    35.          *   @return
    36.          *      可被调用的函数
    37.          */
    38.         function debounce(func, wait, immediate) {
    39.             let result = null,
    40.                 timeout = null;
    41.             return function (...args) {
    42.                 let context = this,
    43.                     now = immediate && !timeout;
    44.                 clearTimeout(timeout); // 重要：在设置新的定时器之前，我们要把之前设置的定时器都干掉，因为防抖的目的是等待时间内，只执行一次
    45.                 timeout = setTimeout(() => {
    46.                     timeout = null;
    47.                     if (!immediate) result = func.call(context, ...args);
    48.                 }, wait);
    49.                 if (now) result = func.call(context, ...args);
    50.                 return result;
    51.             }
    52.         }
    54.         /*
    55.          * throttle：函数节流是为了缩减执行频率，当达到了一定的时间间隔就会执行一次
    56.          *   @params
    57.          *      func:需要执行的函数
    58.          *      wait:设置的间隔时间
    59.          *   @return
    60.          *      返回可被调用的函数
    61.          */
    62.         let throttle = function (func, wait) {
    63.             let timeout = null,
    64.                 result = null,
    65.                 previous = 0; // 上次执行时间点
    66.             return function (...args) {
    67.                 let now = new Date,
    68.                     context = this;
    69.                 // remaining 小于等于0，表示上次执行至此所间隔时间已经超过一个时间间隔
    70.                 let remaining = wait - (now - previous);
    71.                 if (remaining <= 0) {
    72.                     clearTimeout(timeout);
    73.                     previous = now;
    74.                     timeout = null;
    75.                     result = func.apply(context, args);
    76.                 } else if (!timeout) {
    77.                     timeout = setTimeout(() => {
    78.                         previous = new Date;
    79.                         timeout = null;
    80.                         result = func.apply(context, args);
    81.                     }, remaining);
    82.                 }
    83.                 return result;
    84.             };
    85.         };
    87.         let count = 0;
    89.         function fn() {
    90.             console.log(++count);
    91.         }
    92.         let lazyFn = _.throttle(fn, 1000);
    93.         window.onscroll = lazyFn;
    94.     </script>
    95. </body>
    96. </html>