函数防抖节流

卷心菜007

已于 2022-04-12 21:10:17 修改

阅读量2.6k

点赞数 1

分类专栏：面试高频

于 2022-04-12 20:45:32 首次发布

本文链接：https://blog.csdn.net/m0_65912225/article/details/124130151

版权

前端

面试高频专栏收录该内容

27 篇文章 1 订阅

订阅专栏

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

函数节流

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

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

节流函数写法

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请求的数量