js函数防抖和函数节流及使用场景

js函数防抖和函数节流及使用场景

一、函数防抖和函数节流的区别

        函数防抖和函数节流的目的都是，减少代码的执行次数，提高服务效率，但是两者所使用的原理却截然不同。

        函数防抖是利用定时器进行判断，即函数第一次被调用时，设置一个定时器，在设置的时间内，当函数第二次被调用的时候，会清除上一个定时器，设置一个新的定时器，以此类推，当函数不再被调用，或者两次调用时间间隔超过定时器时间，则函数算是被调用了一次。注意：设置定时器时，时间单位是毫秒。

代码样式

​
//  函数防抖
function debounce(callback , time = 400){
        let t ;
        return function(){
            clearTimeout(t);
            t = setTimeout(callback , time);
        }
    }
    window.onscroll = debounce(function(){
        console.log("调用了一次");

    })

​

        函数节流是利用时间戳进行判断，即函数第一次被调用时先得到第一个时间戳，函数第二次被调用时，再次获得一个时间戳，第二次时间戳减去第一个时间戳会得到一个时间差，设置这个时间差就可以控制函数被调用时的时间间隔，当两次时间戳的差达到所设置的时间差时，函数才会再次执行，此时函数算调用了一次。注意：设置时间戳时，时间单位是毫秒。

代码样式

//  函数节流
function throle(callback,time){
        let lasttime = new Date().getTime();
        return function(){
            let now = new Date().getTime();
            if(now - lasttime > time){
                callback();
                lasttime = now;
            }
        }
    }
    window.onscroll = throle(function(){
        console.log("函数调用了一次");
    },400)

二、函数防抖的特点

        函数只执行最后一次操作，因此在一些频繁触发的事件中，显得尤为重要，在使用了函数防抖后，触发频率明显下降，大大减少了代码运行次数，从而提升了性能，更提升了用户的使用体验。

三、函数节流的特点

        函数执行有时间间隔，因此在一定程度上也减轻了恶意频繁的点击，攻击服务器的情况。

四、函数防抖的使用场景

       通常应用在滚动条事件，即时搜索框等。

五、函数节流的使用场景

       通常用在按钮、验证等。