0
点赞
收藏
分享

微信扫一扫

函数防抖节流

扬帆远航_df7c 2022-04-14 阅读 142
前端

什么是函数节流?什么是函数防抖?

函数节流

一次函数执行一次后,只有大于设定的执行周期后才会执行第二次

有个需要频繁触发的函数,处于优化性能角度,在规定时间内,只让函数触发的第一次生效,后面不生效

节流函数写法

fn:要被节流的函数 delay:规定时间

function throttle(fn,delay){
    //记录上一次函数触发的时间
    var lastTime = 0;
    return function(){
        //记录当前函数触发的时间
        var nowTime = Date.now()
        if(nowTime - lastTime > delay){
            fn.call(this);
            //同布时间
            lastTime = nowTime;
        }
    }
}
document.onscroll = throttle(function(){
    console.log('scroll事件被触发了'+Date.now())
},200)

通过闭包的方式,引用lastTime变量

上一次时间减去下一次时间大于两百浩渺的的时候才会被触发一次

通过节流函数,可以极大的减少函数调用的次数,从而节约性能,优化性能

思路:通过定义函数,用闭包的方式记录上一次触发的时间,返回一个新的函数,获取当前触发时间,当前触发时间减去上一次触发时间大于传入的延迟时间时,才会执行函数,函数结束后,同步上一次触发时间。过程中嵌套多层函数涉及到this指向性问题,通过call函数将当前this指向到函数中,修正了this指向问题。

防抖函数

一个需要频繁出发的函数,在规定时间内,只让最后一次生效,前面的不生效

function debounce(fn,delay){
    //记录上一次延时器
    var timer = null;
    return functin(){
        //清除上一次延时器
        clearTimeout(timer)
        //重新设置新的延时器
        timer = setTimeout(function (){
            fn.apply(this);
        },delay);
    }
}

为了达到延迟最后一次生效,通常情况下会设置一个延时器,setTimeout

限制ajax请求的数量

举报

相关推荐

0 条评论