<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button id="btn1">点击1</button>
<button id="btn2">点击2</button>
</body>
<script>
// 防抖
// 1.首次是否延迟触发
// 2. delay秒之内 触发的事件不执行
function fn1() {
console.log(1);
}
btn1.onclick = debounce(fn1, 1000, true);
btn2.onclick = debounce(fn1, 1000, false);
function debounce(fn, delay, triggleNow) {
var t = null;
// 返回值
var callResult = null;
// 请款重置定器
debounce.remove = function () {
clearTimeout(t);
t = null;
};
return function () {
var that = this;
// 可能会携带参数
var args = arguments;
if (t) {
clearTimeout(t);
}
if (triggleNow) {
var isdo = !t;
t = setTimeout(() => {
t = null;
}, delay);
if (isdo) {
// 第一次进来就直接触发
callResult = fn.apply(this, arguments);
}
} else {
t = setTimeout(() => {
callResult = fn.apply(this, arguments);
}, delay);
}
return callResult;
};
}
</script>
</html>
封装防抖函数以及防抖的两种情况
最新推荐文章于 2023-08-16 10:53:35 发布