0216tool_xiaoye
Version:
叶永洁自定义工具函数库
53 lines (50 loc) • 2.01 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>节流和防抖</title>
</head>
<body>
<button id ="throttle">函数节流</button>
<button id="debounce">函数防抖</button>
<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.20/lodash.js"></script>
<script>
//自定义节流和防抖
//返回处理节流函数的工具函数
function throttle (callback,time){
let pre = 0 //上一次调用时的时间 , 0 -->保证第一次一定调用
return function (event){//真正调用的函数 this为触发事件的标签
const current = Date.now()
if ( current - pre > time){//间隔 > 指定时间，才调用真正函数执行
callback.call(this,event)
// callback(event)
//调用后，将上次调用的时间重置为当前时间
pre = current
}
}
}
//返回处理防抖函数的工具函数
function debounce (callback,time){
return function (event){
if (callback.hasOwnProperty("timeoutId")){
clearTimeout(callback.timeoutId)
}
callback.timeoutId = setTimeout(() => {
//真正调用函数处理事件
callback.call(this,event)
//事件处理完成，清除标识
delete callback.timeoutId
},time)
}
}
</script>
<script>
function fn (event){
console.log("处理事件",this,event)
}
document.getElementById("throttle").onclick = throttle(fn,2000)
document.getElementById("debounce").onclick = debounce(fn,2000)
</script>
</body>
</html>