JS函数节流和函数防抖

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Positive129/article/details/79974976

1.概念解释

函数节流和函数防抖都是用来都是优化高频率执行js代码的一种手段。

函数节流是指一定时间内js方法只运行一次。比如人的眨眼睛,就是一定时间内眨一次。这是函数节流最形象的解释。

函数防抖是指频繁触发的情况下,只有足够的空闲时间,才执行代码一次。比如生活中的坐公交,就是一定时间内,如果有人陆续刷卡上车,司机就不会开车。只有别人没刷卡了,司机才开车。

2.函数节流

函数节流应用的实际场景,多数在监听页面元素滚动事件(onscroll事件)和页面放大缩小事件(onresize)的时候会用到。因为这两个事件都是高频触发的事件。下面以监听页面元素滚动为示例:

//函数节流
var canRun = true; //控制开关
document.getElementById("throttle").onscroll = function(){
    if(!canRun){
        // 判断是否已空闲,如果在执行中,则直接return
        return;
    }

    canRun = false;
    setTimeout(function(){
        console.log("函数节流");
        canRun = true;
    }, 300);
};

函数节流的要点是,声明一个变量当标志位,记录当前代码是否在执行。
如果空闲,则可以正常触发方法执行。
如果代码正在执行,则取消这次方法执行,直接return

3.函数防抖

函数节流是一个很好用的方案,但假如我并不希望每次都是要事件结束后等待delay的事件后才执行回调,但是又希望减少DOM操作,那该如何处理呢?这时候就要用到函数防抖了,以下还是以页面元素滚动监听的例子,来进行解析:

//函数防抖
var timer = false;
document.getElementById("debounce").onscroll = function(){
    clearTimeout(timer); // 清除未执行的代码,重置回初始化状态

    timer = setTimeout(function(){
        console.log("函数防抖");
    }, 300);
};  

函数防抖的要点,也是需要一个setTimeout来辅助实现。延迟执行需要跑的代码。
如果方法多次触发,则把上次记录的延迟执行代码用clearTimeout清掉,重新开始。
如果计时完毕,没有方法进来访问触发,则执行代码。

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页