手搓防抖debounce

Z小明
205 阅读3分钟

当处理用户输入时，有时候需要进行防抖处理以减少不必要的请求或操作频率。防抖的基本原理是在触发事件后，等待一定时间间隔（例如0.5秒），确保事件不再被触发后再执行相应的操作。下面是一个简单的例子，展示了如何使用防抖函数来处理用户输入的情况：

总结说明：防抖是等待一段时间后执行事件处理函数，如果在等待期间有新的触发事件，等待时间会重新计算。

  1. 防抖函数 (debounce) ：定义了一个函数，接受一个函数 func 和一个等待时间 wait 参数（默认为 200 毫秒）。在 changeInput 方法中调用 console 方法时，实际上调用了经过防抖处理的 debounce 函数返回的新函数。
  2. 示例：使用上述防抖函数来处理用户输入。changeInput 方法监听输入框的输入事件，并调用了防抖后的 console 方法。当输入内容变化时，会输出 '输入内容即显示' 和 '防抖打印'，分别表示实时显示和防抖后的操作。
  3. 实际应用：在实际项目中，可以将防抖函数用于各种需要延迟执行的场景，如搜索建议的实时更新、输入框内容验证、滚动事件处理等。
  4. 注意事项：
    • 调整 wait 参数以适应具体的应用需求，根据实际情况调整防抖的延迟时间。

通过以上方式，可以有效地管理用户输入频率，减少不必要的计算或网络请求，提升用户体验和应用性能。

1、先看看例子输出结果：

手动输入12345，在change 事件监听输出了5次，使用了防抖只打印了一次

5.png

2、下面是input 事件触发打印

输入框绑定了changeInput事件，在这个事件上打印出每次输入的内容。

如果输入内容就调用接口或者处理逻辑，无疑是增加不必要的计算或网络请求，对用户体验和应用性能大打折扣。

<Input v-model.trim="userName" clearable placeholder="防抖-用户名" style="width: 180px;margin-left: 15px" @on-change="changeInput" />

// 输入内容即显示
    changeInput () {
      console.log('输入内容即显示', this.userName);
    },

3、使用防抖就很好解决这个问题，使用防抖输入后间隔多久触发一次，这样减少不必要的计算或网络请求，提升用户体验和应用性能。

手搓一个防抖

// 防抖函数，设置默认时间为200毫秒
const debounce = (func, wait = 200) => {
    if (typeof func !== 'function') {
        throw new TypeError('需要一个函数作为参数');
    }
    wait = +wait || 0;
 
    let timeoutId = null;
 
    return function (...args) {
        const self= this;
 
        if (timeoutId) {
            clearTimeout(timeoutId); // 清除之前的定时器
        }
 
        timeoutId = setTimeout(() => {
            func.apply(self, args); // 调用函数
        }, wait);
    };
};

4、输入事件结合防抖函数输入效果如图

5.png

5、为了打印，拆开使用

   // 输入内容即显示
    changeInput () {
      console.log('输入内容即显示', this.userName);
 
      // 调用防抖的方法
      this.console()
    },
 
    // 防抖 输入后 0.5s 后执行
    console:debounce(function() {
      console.log('防抖打印', this.userName);
      // 这里就可以调用请求方法
    }, 500),

一般项目中使用

    // 输入内容
    changeInput: debounce(function () {
      console.log('项目使用防抖打印', this.userName);
      // 这里就可以调用请求方法
    }, 500),

效果：

6.png

关于当节流，请点击这里：手搓节流 throttle

avatar
文章
阅读
粉丝