WHAT 什么是防抖?
当持续触发相同事件时,如果设定的时间到来之前,又一次触发了事件,就重新开始延时;如果设定的时间到来之后都没有再次触发事件,则执行最后一次事件。(就像王者荣耀的回城操作一样)
HOW 应用场景
1. keyup事件(example:输入框 [验证用户名是否可用])
普通版的输入框事件:
用户每按一下键盘都会发送一个ajax请求出去,用户还没输入完成,就发送了很多无用的请求,浪费性能。
<body>
<input id="user" type="text" placeholder="请输入要验证的名字" />
<script>
$("#user").keyup(() => {
const userName = $("#user").val().trim();
console.log(userName);
$.ajax({
method: "get",
url: "http://127.0.0.1:3001/validate",
data: { userName },
success: (res) => {
console.log(res);
},
});
});
</script>
</body>
console:
2. 防抖版的输入框事件
<script>
$(function () {
// timer 用于存储定时器 id
let timer = null;
$("#user").keyup(() => {
// 关闭之前的定时器
clearTimeout(timer);
// 执行新的定时器,如果 500 毫秒内没有新的操作,才发送网络请求
timer = setTimeout(function () {
const userName = $("#user").val().trim();
console.log(userName);
$.ajax({
method: "get",
url: "http://127.0.0.1:3001/validate",
data: { userName },
success: (res) => {
console.log(res);
},
});
// 定时器的时间
}, 500);
});
});
</script>
console: