js函数的节流和防抖

Posted 2021-01-21 渴望成为大牛的男人

js函数的节流和防抖

用户浏览页面时会不可避免的触发一些高频度触发事件（例如页面 scroll ，屏幕
resize，监听用户输入等），这些事件会频繁触发浏览器的重拍（reflow）和重绘（repaint）这会严重耗费浏览器性能，造成页面
卡顿。
举几个例子：比如说我们在滚动事件中要做一个复杂的计算，或者做一个按钮的防二次点击操作的需求，这些需求都会在频繁的事件
回调中做复杂计算，很有可能导致页面卡顿，这时候我们可以将多次计算合并为一次计算，只在一个精确点做操作。这些事可以利用
函数的防抖来实现

函数的防抖，就是可以让这个函数每次触发的时间间隔小于wait，防抖的情况下就是假设用户一直触发我这个函数，这个函数只会调用一次，也就是在最后一次来进行调用，下面是一个简单的防抖函数代码实现

//func是你要绑定防抖操作的函数，wait是你想要这个函数多少ms之内不能连续触发，也就是假如你设置了100ms后触发，那这个函数在100ms之内如果又执行了就不会触发，直到超过100ms后这个函数才会执行
    function debounce(func, wait) {
        // 定时器变量
        var timer
        return function() {
            // 每次触发绑定的函数之前先清除定时器
            clearTimeout(timer)
            // 指定 xx ms 后触发
            timer = setTimeout(func, wait)
        }
    }
     
    // 实际想绑定在 scroll 事件上的 handler
    function realFunc(){
        console.log("success ")
    }
     
    // 采用防抖动
    window.addEventListener(‘scroll‘,debounce(realFunc,500))

假如说有现在这样一个需求，我们需要在滚动的时候实时的console.log(0)，你懂得，在一次滚动过程中函数的执行频率特别快
，如果这个函数有更为复杂的方法，比如操作dom或者其他交互，会严重影响性能。这个时候我们就需要做一个节流的操作来减
少这个函数的调用频率

函数节流，就是将多次执行变成每隔一段固定的时间执行一次，会大大提高性能，比如我们可以设置一个高频率事件每隔100ms执行一次，这样性能就会得到很大的优化，下面是一个简单的节流函数的代码实现

//mustRunTime就是你想要设置的多少ms执行一次
    function throttle(func, wait, mustRunTime) {
        var timer,
            startTime = new Date();
     
        return function() {
            var _this = this,
                args = arguments,
                curTime = new Date();
     
            clearTimeout(timer);
            // 如果达到了规定的触发时间间隔，就触发这个func
            if(curTime - startTime >= mustRunTime){
                func.apply(_this,args);
                startTime = curTime;
            // 没达到触发间隔，重新设定定时器
            }else{
                timer = setTimeout(func, wait);
            }
        };
    };

    function realFunc(){
        console.log("success");
    }
    // 采用了节流函数
    window.addEventListener(‘scroll‘,throttle(realFunc,500,1000));

以上是本人对js函数节流和防抖的一些理解，希望对你能有所帮助~~~