在输入框输入时,要搜索某个字符串,基于性能考虑,肯定不能用户没输入一个字符就发送一次搜索请求,一种方法就是等待用户停止输入,比如过了500ms用户都没有再输入,那么就搜索此时的字符串,这就是防抖;节流比防抖宽松一些,比如我们希望给用户一些搜索提示,所以在用户输入过程中,没过500ms就查询一次相关字符串,这就是节流。
节流
防抖的实现思路:每次触发事件时都取消之前的延时调用方法:
var timer = null
function input1 () {
clearTimeout(timer)
timer = setTimeout(function () {
// ajax()
console.log(document.getElementById('input1').value)
}, 500)
}
防抖
节流的实现思路:每次触发事件时都判断当前是否有等待执行的延时函数:
var flg = false
function input2 () {
if (flg) {
return false
}
flg = true
setTimeout(function () {
// ajax()
console.log(document.getElementById('input2').value)
flg = false
}, 500)
}