一、防抖

1.定义实现

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

  1. const debounce = (fn, wait) => {
  2.         let timer = null;
  3.         return (...args) => {
  4.           if (timer) {
  5.             clearTimeout(timer);
  6.           }
  7.           timer = setTimeout(() => {
  8.             fn.apply(this, args);
  9.           }, wait);
  10.         };
  11.       };

2.测试代码：

  1. <!DOCTYPE html>
  2. <html lang="zh-cmn-Hans">
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1" />
  6.     <title>debounce</title>
  7.     <style>
  8.       #container {
  9.         width: 100%;
  10.         height: 200px;
  11.         line-height: 200px;
  12.         text-align: center;
  13.         color: #fff;
  14.         background-color: #444;
  15.         font-size: 30px;
  16.       }
  17.     </style>
  18.   </head>
  20.   <body>
  21.     <div id="container"></div>
  22.     <script>
  23.       const debounce = (fn, wait) => {
  24.         let timer = null;
  25.         return (...args) => {
  26.           if (timer) {
  27.             clearTimeout(timer);
  28.           }
  29.           timer = setTimeout(() => {
  30.             fn.apply(this, args);
  31.           }, wait);
  32.         };
  33.       };
  34.       var count = 1;
  35.       var container = document.getElementById("container");
  36.       function getUserAction(e) {
  37.         console.log(e);
  38.         container.innerHTML = count++;
  39.       }
  40.       container.onmousemove = debounce(getUserAction, 1000);
  41.     </script>
  42.   </body>
  43. </html>

二、节流

1.定义实现

在规定时间内，保证执行一次该函数

  1. const throttle = (fn, wait) => {
  2.         let last = 0;
  3.         return (...args) => {
  4.           let now = +new Date();
  5.           if (now - last >= wait) {
  6.             last = now;
  7.             fn.apply(this, args);
  8.           }
  9.         };
  10.       };
  12. // or 
  14. const throttle = (func, wait) => {
  15.         var timeout;
  16.         return (...args) => {
  17.           if (!timeout) {
  18.             timeout = setTimeout(function () {
  19.               timeout = null;
  20.               func.apply(this, args);
  21.             }, wait);
  22.           }
  23.         };
  24.       };

2.实现

  1. <!DOCTYPE html>
  2. <html lang="zh-cmn-Hans">
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1" />
  6.     <title>throttle</title>
  7.     <style>
  8.       #container {
  9.         width: 100%;
  10.         height: 200px;
  11.         line-height: 200px;
  12.         text-align: center;
  13.         color: #fff;
  14.         background-color: #444;
  15.         font-size: 30px;
  16.       }
  17.     </style>
  18.   </head>
  20.   <body>
  21.     <div id="container"></div>
  22.     <script>
  23.       const throttle = (fn, wait) => {
  24.         let last = 0;
  25.         return (...args) => {
  26.           let now = +new Date();
  27.           if (now - last >= wait) {
  28.             last = now;
  29.             fn.apply(this, args);
  30.           }
  31.         };
  32.       };
  34.       var count = 1;
  35.       var container = document.getElementById("container");
  36.       function getUserAction(e) {
  37.         console.log(e);
  38.         container.innerHTML = count++;
  39.       }
  40.       container.onmousemove = debounce(getUserAction, 1000);
  41.     </script>
  42.   </body>
  43. </html>