当处理用户输入时,有时候需要进行防抖处理以减少不必要的请求或操作频率。防抖的基本原理是在触发事件后,等待一定时间间隔(例如0.5秒),确保事件不再被触发后再执行相应的操作。下面是一个简单的例子,展示了如何使用防抖函数来处理用户输入的情况:
总结说明:防抖是等待一段时间后执行事件处理函数,如果在等待期间有新的触发事件,等待时间会重新计算。
-
防抖函数 (
debounce
):定义了一个函数,接受一个函数func
和一个等待时间wait
参数(默认为 200 毫秒)。在changeInput
方法中调用console
方法时,实际上调用了经过防抖处理的debounce
函数返回的新函数。 -
示例:使用上述防抖函数来处理用户输入。
changeInput
方法监听输入框的输入事件,并调用了防抖后的console
方法。当输入内容变化时,会输出'输入内容即显示'
和'防抖打印'
,分别表示实时显示和防抖后的操作。 -
实际应用:在实际项目中,可以将防抖函数用于各种需要延迟执行的场景,如搜索建议的实时更新、输入框内容验证、滚动事件处理等。
-
注意事项:
- 调整
wait
参数以适应具体的应用需求,根据实际情况调整防抖的延迟时间。
- 调整
通过以上方式,可以有效地管理用户输入频率,减少不必要的计算或网络请求,提升用户体验和应用性能。
1、先看看例子输出结果:
手动输入12345,在change 事件监听输出了5次,使用了防抖只打印了一次
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、为了打印,拆开使用
// 输入内容即显示
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),
效果:
关于当节流,请点击这里:手搓节流 throttle