节流概念: 限制函数触发频率,规定时间内只能触发一次。
代码实现:
function Throttle(fun,t) {
let timeout
return function () {
if(!timeout){
timeout = setTimeout(()=>{
timeout=null
},t)
fun(arguments)
}
}
}
document.getElementById('element').onclick=Throttle(()=>{
console.log(1)
},1000)
防抖概念: 连续触发事件,只触发一次,只有中断指定的时间后,才能再次触发。
代码实现:
function Shake(fun,t) {
let timeout
return function () {
if(!timeout){
timeout = setTimeout(()=>{
timeout=null
},t)
fun(arguments)
}else{
clearTimeout(timeout)
timeout = setTimeout(()=>{
timeout=null
},t)
}
}
}
总结: 防抖与节流大体上差不多,只是一点点细节差别。 都运用了函数柯里化思想,闭包一个计时器,若每次调用函数时,定时器存在就做相应处理,达到实现防抖与节流。(以上只是实现最基本的节流与防抖,其他未考虑。如:参数的传递)