当前位置：网站首页>Anti-shake and throttling

<input type="text">
  <script>
    let input = document.querySelector("input");

    let time = null;

    // oninput：当用户向 <input> 中尝试输入时执行 JavaScript：
    input.oninput = function () {

      if (time !== null) {
        /**
         *  clearTimeout() 方法可取消由 setTimeout() 方法设置的定时操作.
            clearTimeout() 方法的参数必须是由 setTimeout() 返回的 ID 值.
            注意: 要使用 clearTimeout() 方法, 在创建执行定时操作时要使用全局变量：
         */
        clearTimeout(time);
      }

      time = setTimeout(() => {
        console.log(this.value);
      }, 500)

    }
  </script>

Use closures to encapsulate

<input type="text">
  <script>
    let input = document.querySelector("input");

    input.oninput = debounce(function () {
      console.log(this.value);
    }, 500);

    // Use closures to implement encapsulated anti-shake methods
    function debounce(fn, delay) {
      let time = null;
      return function () {
        if (time !== null) {
          clearTimeout(time);
        }
        time = setTimeout(() => {
          fn.call(this);
        }, 500)
      }
    }
  </script>

二、节流（throttle）

2.1 基本概念

间隔时间内函数只被触发一次.

2.2 作用

Reduce high frequency event trigger frequency.

2.3 应用场景

高频事件：如鼠标移动（onmousemove）、鼠标滚动条（onscroll）等.

2.4 节流思路

声明变量存储本次触发的时间 time
每一次触发的时候,使用当前时间 - time,Determine whether the interval between two times exceeds the throttling time
超过：触发,并且存储本次触发时间
不超过：不触发

2.5 eg

body {
      height: 2000px;
}

<script>
    let flag = true;
    window.onscroll = function () {
      if (flag) {
        setTimeout(() => {
          console.log("123");
          flag = true;
        }, 500);
      }
      flag = false;
    }
 </script>

Use closures to encapsulate

<script>
window.onscroll = throttle(function () {
      console.log("123");
}, 500);


// 封装
function throttle(fn, delay) {
   let flag = true;
   return function () {
      if (flag) {
         setTimeout(() => {
           fn.call(this);
           flag = true;
         }, delay);
      }
      flag = false;
   }
}
</script>