防抖:
防抖是指短时间内大量触发同一事件,只会在最后一次事件完成后延迟执行一次函数
。例如,在输入用户名的过程中,需要反复验证用户名。
原理:是在触发事件后设置计时器。在计时器延迟过程中,如果事件再次触发,则重置计时器。在没有触发事件之前,计时器将再次触发并执行相应的功能。
function debounce(fn,delay=500){
let t=null
return function(...args){
if(t!==null){
clearTimeout(t)
}
const t= setTimeout(() => {
fn().call(this,args)
}, delay);
}
}
节流:
节流是指每隔一段时间就执行一次函数。就像未拧紧的水龙头一样,水龙头每隔一段时间就会滴水。即使在这段时间管道里有更多的水,水龙头也不会掉更多的水。
节流的原理是在触发事件后设置计时器。在计时器延迟过程中,即使事件再次触发,计时器的延迟时间也不会改变。在计时器执行功能之前,计时器不会复位。
作者:LeetCode
链接:https://leetcode.cn/leetbook/read/interview-coding-frontend/dq3hqi/
window.onscroll=throttle(function(){
console.log("这是广告")
},2000)
// 节流函数:
function throttle(fn,interval=500){
let t=null
return function(...args){
// 已经开启定时器,反复触发则return出去不执行函数调用。
if(t) return
t= setTimeout(() => {
t=null
fn.call(this,args)
}, interval);
}
}