扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要为大家展示了js防抖函数和节流函数使用场景和实现有什么区别，内容简而易懂，希望大家可以学习一下，学习完之后肯定会有收获的，下面让小编带大家一起来看看吧。
开发过程中，都遇到过某个事件被频发触发的场景，比如resize，scroll事件，input事件，而对应的事件处理函数也会被高频率调用，这时会增加浏览器负担，用户体验也不好，这也是防抖函数和节流函数存在的意义和使用场景。
函数防抖（debounce）：
持续触发事件时，在设定时间段内没有被触发，才去调用事件处理函数，在设定时间段内如果事件又被触发，则不调用事件处理函数，并从触发事件时间重新开始延时。
具体实现：
设计思路：在setTimeout中调用事件处理函数，如果在定时器触发函数执行之前又触发函数，清除定时器。
function debounce(fn, timeout){
timeout = timeout || 1000;
let timer;
return () => {
if(timer){ clearTimeout(timer)}
timer = setTimeout(() => {
fn()
},timeout)
}
}
function printEvent(){
console.log('1121212')
}
window.addEventListener('scroll',debounce(printEvent,1000),false) 
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网