防抖和节流 讲解
2020-09-24 本文已影响0人
zhang463291046
以下内容是引用或者借鉴别人的,自己只是做个笔记,方便学习。理解错误的地方,欢迎评论。如有侵权,私聊我删除,未经允许,不准作为商业用途
防抖:在n秒内,连续触发同一事件,前面的都不执行,只执行最后一次方法
- 思路:在n秒内再次被触发,则清除定时器,让它重新开始计时
/**
* @desc 函数防抖
* @param func 函数
* @param wait 延迟执行毫秒数
* @param immediate true 表立即执行,false 表非立即执行
*/
function debounce(func,wait=1000,immediate=false) {
let timeout;
return function () {
let context = this;
let args = arguments;
if (timeout) clearTimeout(timeout);
if (immediate) {
var callNow = !timeout;
timeout = setTimeout(() => {
timeout = null;
}, wait)
if (callNow) func.apply(context, args)
}
else {
timeout = setTimeout(function(){
func.apply(context, args)
}, wait);
}
}
}
节流:在n秒内,连续触发同一事件,只执行第一次方法,最后都不执行
- 思路:在n秒内第一次触发时,添加锁机制,等到执行了函数再释放
function throttle(func, wait=1000) {
let timeout;
return function() {
let context = this;
let args = arguments;
if (!timeout) {
timeout = setTimeout(() => {
timeout = null;
func.apply(context, args)
}, wait)
}
}
}