js节流,时间戳节流和定时器节流
节流
和防抖区别是,防抖是间隔时间后最后执行一次,节流是按间隔时间连续执行
时间戳截流——首节流
用最新触发的时间减去上一次回调执行的时间,如果大于等于 wait 则会执行回调
时间戳节流在第一次触发时会立刻执行。
在第一次操作的时候就会执行一遍fn,之后的操作如果时间不超过delay(例如2s)就不会在执行函数,理解为第一次执行,最后一次不执行
function throttle(func, wait) {
let previous = 0
return function throttled(...args) {
const ctx = this
const now = Date.now()
const remain = wait - (now - previous)
if (remain <= 0) {
func.apply(ctx, args)
previous = now
}
}
}
定时器节流——尾节流
指定时间之后执行回调,触发一个定时器之后,即使再次触发节流函数,也不会导致定时器推迟执行(事件循环或者同步阻塞会导致延迟执行,在这里不用考虑)。它不会清除已经开始的定时器,而是等待定时器被执行之后才再开始下一个定时器。
理解为第一次不执行,最后一次执行
function throttle(func, wait) {
let timeout = 0
return function throttled(...args) {
const ctx = this
// 如果已经是定时器定时阶段,则直接跳过,相当于忽略了触发
// 必须等到定时器到时间之后
if (!timeout) {
timeout = setTimeout(() => {
func.apply(ctx, args)
timeout = null
}, wait)
}
}
}
兼顾型节流
兼顾型节流,就能够在第一次,最后一次都执行代码。
function throttle(fn, delay){
let last=0;
let timer=null;
return function(){
let now=Date.now();
let reming=delay-(now-last);
clearTimeout(timer);//不管三七二十一,有定时器都先清除定时器
if(reming<0){
fn.apply(this, arguments);
last=now;
}else{
timer=setTimeout(()=>{
fn.apply(this,arguments);
}, reming);
}
}
}
应用场景
记录鼠标或页面滚动位置
版权声明:
作者:wuhou123
链接:https://wuhou.fun/500.html
来源:前端网
文章版权归作者所有,未经允许请勿转载。

共有 0 条评论