什么是防抖和节流?有什么区别
防抖
防抖:防止连续多次触发,n秒内连续触发则只触发最后一次。目的:只执行一次
原理:触发之前判断是否已经触发,已经触发就取消执行上一次的事件,然后执行本次事件。
// 防抖函数
function debounce(fn, delay = 200) {
let timer = 0
return function() {
// 如果这个函数已经被触发了
if(timer){
clearTimeout(timer)
}
timer = setTimeout(() => {
fn.apply(this, arguments); // 透传 this和参数
timer = 0
},delay)
}
}
节流
节流:防止连续多次触发,n秒内连续多次触发则n秒内执行一次。目的:减少执行次数
原理:触发之前判断是否已经触发,已经触发就取消当前本次执行事件,继续执行上一个事件。
// 节流函数
function throttle(fn, delay = 200) {
let timer = 0
return function () {
if(timer){
return
}
timer = setTimeout(() =>{
fn.apply(this, arguments); // 透传 this和参数
timer = 0
},delay)
}
}
防抖和节流的区别:
- 现象上的区别:防抖是一直连续触发时无论执行多少次都执行最后一次。节流是连续一直触发时n秒执行一次,减少执行次数。
- 原理上的区别:当连续触发时,防抖是取消执行上一次的事件, 节流是取消执行本次的事件。
防抖和节流的使用
let input = document.getElementById('input');
input.oninput = debounce(function(ev){
console.log('input');
}, 1000)
window.document.onmousemove = throttle(function(){
console.log('onmousemove');
}, 1000)
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 安耀奇博客!
评论