防抖和节流

wade

发布于 2020-04-24 17:00:53

3880

发布于 2020-04-24 17:00:53

文章被收录于专栏：coding个人笔记coding个人笔记

在JavaScript中，防抖和节流其实是一个很重要的概念。主要应用场景就是会频繁触发的事件。比如监听滚动、比如点赞功能，总不能点一次赞就向后台发送一次数据，这时候就要用到防抖和节流。

防抖和节流的核心就是定时器，我们要知道定时器的一个概念，就是在定时之后，在没触发之前清除定时器，这个定时器方法不会被触发。

防抖最简单例子：

var t;
window.addEventListener('scroll',function(e){
    if(t) clearTimeout(t);
    t = setTimeout(function(){
        console.log(96)
    },500);
});

监听scroll，当滑动的时候就判断是否有定时器，如果有，就清除定时器，重新设定一个定时器，直到不再滑动就执行定时器的方法。

上面的方法有一个全局的变量t，我们可以用闭包的方式：

window.addEventListener('scroll',function(e){
    var t;
    return function(){
        if(t) clearTimeout(t);
        t = setTimeout(function(){
            console.log(96)
        },500);
    }
}());

一般防抖就能符合大部分频繁触发的场景了，也有比较特殊的情况，图片懒加载的时候，虽然在一直滑动，但是因为滑动之后我们相应的还是需要加载图片，不可能等到不滑动了加载所有图片，所以会用到节流，一定时间内还是会执行方法。

节流使用场景就是频繁触发一个事件，我们用了防抖，只会在停止触发的时候执行一次，但是在频繁触发情况下还是需要执行某个方法，这时候就要用到节流。

节流简单例子

var startTime = Date.now(); //开始时间
var time = 2000; //间隔时间
var timer;
window.onscroll = function throttle(){
    var currentTime = Date.now();
    if(currentTime - startTime >= time){
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        console.log('滚动条位置：' + scrollTop);
        startTime = currentTime;
    }else{
        clearTimeout(timer);
        timer = setTimeout(function () {
            throttle()
        }, 50);
    }
}

因为还是太菜，节流闭包方式还是没办法封装成功，但是大致思路就是这样，可以自己运行一下代码。

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2018-07-20，如有侵权请联系 cloudcommunity@tencent.com 删除

scroll