共计 593 个字符,预计需要花费 2 分钟才能阅读完成。
当你在输入框每输出一个字符的时候
百度都会一直的依据当下的输出给予新的提醒
那么,如果有一个人打字速度十分快
输出了 helloworld 这个单词 只用了 200ms
这是键盘事件函数被触发了 10 次
咱们把这个称为 函数抖动
他每按下一次键盘 浏览器都会向服务器做一次查问
间断触发了 10 次申请,显示对这个手速特地快的人 这不是他想要的。
咱们至多节约了 9 次查问 减少了服务器的压力。
解决思路是这样的:
当用户按下键盘后 不要立刻向服务器发动申请,
期待 300ms,如果没有持续输出 阐明输出内容结束
这时候在向服务器发送申请。
就大大的防止了节约
例子:
// 这是未做防抖解决的代码:inputEle.addEventListener("keyup", function(e){//ajax(...); 发送申请到服务器
})
// 这是做了防抖解决的代码
this.$refs.inputEle.addEventListener(
"keyup",
(function (e) {
// 这是一个自运行函数
var t = null;
return function () {
// 真正的事件函数在这里
clearTimeout(t); // 每次触发,都把后面的定时器敞开,只管第一次定时器并不存在
t = setTimeout(function () {
// 开启新的定时器
//ajax(...); 发送申请到服务器
console.log("抖动");
}, 300);
};
})());
},
正文完