防抖

防抖：在频繁动作的事件中，让事件结束后再等待一段时间后执行。

  1. /*
  2.   * 滚动完后，多少秒执行一次
  3.   * 通过 锁 和 闭包思路解决
  4.   */
  6. <!DOCTYPE html>
  7. <html lang="en">
  9. <head>
  10.   <meta charset="UTF-8">
  11.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  12.   <title>Document</title>
  13.   <style>
  14.     div {
  15.       width: 100vw;
  16.       height: 20vh;
  17.       background: cyan;
  18.       display: flex;
  19.       justify-content: center;
  20.       align-items: center;
  21.     }
  22.   </style>
  23. </head>
  25. <body>
  26.   <div></div>
  27. </body>
  29. </html>
  30. <script>
  31.   // 函数防抖: 在这个事件触发完后的一段时间执行。
  32.   document.querySelector('div').onmousemove = debounce(function () {
  33.     console.log(1);
  34.     console.log(this);
  35.   }, 300)
  36.   function debounce(fun, delay) {
  37.     let time = null;
  38.     let _this = this;
  39.     let args = arguments;
  40.     console.log(_this);
  41.     return function () {
  42.       //  进来先清空
  43.       clearTimeout(time);
  44.       time = setTimeout(() => {
  45.         console.log(_this);
  46.         fun.apply(_this, args)
  47.       }, delay)
  48.     }
  49.   }
  50. </script>

节流

节流：在执行的事件中每隔一段时间执行一次。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 100vw;
      height: 20vh;
      background: cyan;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>

<body>
  <div></div>
</body>

</html>
<script>
  // 节流: 让这个函数在触发过程中每间隔一段直接执行一次
  function throttle(fun, delay) {
    let bool = true;
    return function () {
      // 关闭停止
      if (!bool) return
      bool = false;
      setTimeout(() => {
        fun.apply(this, arguments)
        bool = true
      }, delay)
    }
  }
  let num = 0;
  document.querySelector('div').onmousemove = throttle(function () {
    this.innerHTML = num++
  }, 1000)

</script>