js 防抖和节流
程序员文章站
2022-08-11 22:06:03
防抖和节流 在处理高频事件，类似于window的resize或者scorll，或者input输入校验等操作时。如果直接执行事件处理器，会增大浏览器的负担，严重的直接卡死，用户体验非常不好。 面对这种情况，我们一般可以采用防抖和节流的方式减少调用频率。同时也不会影响实际效果。 一、防抖 防抖的作用是： ......
节流
简单讲就是尽管你非常频繁的触发事件，但是单位时间内我只会执行一次。
比如窗口的 resize 事件，在拖动浏览器窗口的过程中，resize是会不断执行的，
频率非常之高，简直令人发指。
所以很有必要做一个节流，让事件按照一定的频率来执行，从而大大减少执行次数。
function throttle(fn, wait=500){
let last = 0
return function (){
let now = Date.now()
if(now - last > wait){
fn.apply(this, arguments)
last = now
}
}
}
防抖
简单说，就是不管你频繁的触发多少次，我只执行一次。
function debounce(fn, wait=500){
let timer = null
return function (){
let now = !timer
timer && clearTimeout(timer)
timer = setTimeout(()=>{
timer = null
}, wait)
if(now){
fn.apply(this, arguments)
}
}
}
对比
防抖和节流的不同点在于，防抖让事件自始至终只会执行一次，
即便你不断的触发，事件只会在你最后一次触发后执行
而节流，不只是触发一次，而是单位时间内只触发一次，比方，设置为每两秒执行一次，你在60秒内触发了60次，事件只会执行30次。
本文地址：https://blog.csdn.net/zhai_865327/article/details/107538845