立即执行:即多次触发事件,第一次会立即执行函数,之后在设定wait事件内触犯的事件无效,不会执行。
非立即执行函数: 多次触发事件,只会在最后一次触发事件后等待设定的wait时间结束时执行一次。
<!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>
</body>
<script>
/**
* @desc 函数防抖---“立即执行版本” 和 “非立即执行版本” 的组合版本
* @param func 需要执行的函数
* @param wait 延迟执行时间(毫秒)
* @param immediate---true 表立即执行,false 表非立即执行
**/
function debounce(func, wait, immediate) {
let timer;
return function () {
//this指向debounce
let context = this;
//即参数,func,wait
let args = arguments;
//如果timer不为null, 清除定时器
if (timer) clearTimeout(timer);
//如果是立即执行
if (immediate) {
//定义callNow = !timer
var callNow = !timer;
//定义wait时间后把timer变为null
//即在wait时间之后事件才会有效
timer = setTimeout(() => {
timer = null;
}, wait)
//如果callNow为true,即原本timer为null
//那么执行func函数
if (callNow) func.apply(context, args)
} else {
//如果是不立即执行
//那就是每次重新定时
timer = setTimeout(function () {
func.apply(context, args)
}, wait);
}
}
}
function handle() {
console.log(Math.random());
}
window.addEventListener("mousemove",debounce(handle,1000,true)); // 调用立即执行版本
// window.addEventListener("mousemove", debounce(handle, 1000, false)); // 调用非立即执行版本
</script>
</html>