关于防抖的小知识

防抖

防止用户频繁操作，只要最后一次触发事件的效果

简单理解就是在一段时间内再次触发此事件，会清空上一次的事件重新开始；如果指定时间内没有再次触发事件，那么这个事件才会执行。

• 监听输入框事件（不加防抖）

  	<input type="text">
      <script>
          let ipt = document.querySelector('input');
          ipt.oninput = function () {
              console.log(this.value);
          }
  	</script>
  

  效果演示：

  

• 监听输入框事件（简单加防抖）

  	<input type="text">
      <script>
          let ipt = document.querySelector('input');
          let t = null; // 定义一个全局变量
          ipt.oninput = function () {
              // 重复触发清除定时器，重新赋值
              if (t !== null) {
                  clearTimeout(t);
              };
              // 一旦触发函数，给t加上定时器
              t = setTimeout(() => {
                  console.log(this.value);
              }, 500)
          }
  	</script>
  

  

  • 多了一个全局变量；
  • 如果要添加业务逻辑就会有点乱。

封装防抖函数

        let ipt = document.querySelector('input');
        function debounce(fn, delay) {
            let t = null;
            return function () {
                if (t !== null) {
                    clearTimeout(t)
                };
                t = setTimeout(() => {
                    fn.call(this); // 重定向this的指向
                }, delay)
            }
        }
		//调用函数
        ipt.oninput = debounce(function () {
            console.log(this.value); // 请注意这里的this需要重定向
        }, 500)

效果展示：

---

原来是豆沙鸭