什么是JS的防抖?
防抖指的是触发事件后在n秒内函数只执行一次,若在n秒内再次触发事件则重新计算,函数不会重复执行。
在实际项目中我们可能会碰到搜索框会浪费大量的请求。比如我们有一个input,每次用户在搜索框输入的时候就触发onInput事件然后发送请求。
以下代码是未优化前
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input type="text" id="input" />
</body>
<script>
let input = document.getElementById("input");
let num = 1;
function sendRequest() {
console.log(num++);
}
input.oninput=sendRequest;
</script>
</html>
优化后
let input = document.getElementById("input");
let num = 1;
function sendRequest() {
console.log(num++);
}
// 我们想让用户输入完毕后过1s后再查询
// 所以我们使用防抖,设置一个定时器,传入要执行的函数,延时的时间
function debounce(fn, wait) {
let timeout;
return function () {
if (timeout) clearTimeout(timeout);
timeout = setTimeout(function () {
fn.apply(this);
}, wait);
};
}
input.oninput = debounce(sendRequest, 2000);