<!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>防抖函数实现</title>
</head>
<body>
<button id="btn">点击</button>
<script>
var oBtn = document.getElementById('btn');
/**
* handle 最终需要执行的事件监听
* wait 事件触发之后多久开始执行
* immediate 控制执行第一次还是最后一次,false表示只执行最后一次
*/
function myDebounce(handle, wait, immediate) {
// 参数类型判断及默认值处理
if(typeof handle !== 'function') throw new Error('handle must be an function')
if(typeof wait === 'undefined') wait = 1000;
if(typeof wait === 'boolean') {
immediate = wait;
wait = 1000;
}
if(typeof immediate !== 'boolean') immediate = false;
// 所谓的防抖效果我们想要实现的就是有一个“人”可以管理handle的执行次数
// 如果我们想要执行最后一次,那就意味着无论我们当前点击多少次,前面的N-1次都无用
let timer = null;
return function proxy(...args) {
let self = this;
let init = immediate && !timer;
clearTimeout(timer);
timer = setTimeout(()=>{
// 因为每次点击都会给timer赋值
// 所以为了保证每个下一次的点击拿到的timer都是初始的值null
// 需要将timer每个setTimeout产生的timer置null
timer = null;
if(!immediate) handle.call(self, ...args);
}, wait)
// 如果当前传递进来的是 true 表示需要立即执行
// 如果想要实现只在第一次执行,那么可以添加上 timer 为 null 作为判断
// 因为只要 timer 为 null 就意味着没有第二次、第三次、...第N次的点击
if (init) handle.call(self, ...args);
}
}
// 定义事件执行函数
function btnClick(ev) {
console.log("点击了", this, ev);
}
// 当前我们执行了按钮点击之后就会执行 ...返回的proxy
oBtn.onclick = myDebounce(btnClick, 1000, true);
</script>
</body>
</html>
完善一个防抖函数
于 2021-07-28 21:27:30 首次发布