使用场景
在搜索框输入信息,下拉栏返回搜索联想结果,需前端发送网络请求,使用防抖。
代码
debounce.js
function debounce(fn, delay, immediate = false) {
// 定义一个定时器, 保存上一次的定时器
let timer = null;
let isInvoke = false;
const _debounce = function(...args) {
// 取消上一次的定时器
if (timer) clearTimeout(timer);
// 判断是否需要立即执行,暂停一段时间继续操作的第一次事件也需要执行
if (immediate && !isInvoke) {
fn.apply(this, args);
isInvoke = true;
} else {
// 延迟执行
timer = setTimeout(() => {
// 外部传入的真正要执行的函数
fn.apply(this, args);
isInvoke = false;
}, delay)
}
}
return _debounce;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text">
<script src="./debounce.js"></script>
<script>
const inputEl = document.querySelector("input");
let counter = 0;
const inputChange = function(event) {
//模拟发送网络请求
console.log(`发送了第${++counter}次网络请求`,this,event);
}
//防抖处理
const debounceChange = debounce(inputChange,2000,true);
inputEl.oninput = debounceChange;
</script>
</body>
</html>