防抖与节流

当事件上绑定了事件处理程序，当这个事件被持续触发时，一直会执行这个事件处理程序，比如onscroll、onresize，而这是没有必要的，甚至会影响性能，影响用户体验。因此，需要在绑定事件的时候做一些操作，使之执行事件处理程序不要那么频繁。主要有两种思路。

一、函数防抖

　　当持续触发事件后，一段时间后没有再触发这个事件，执行事件处理程序。如果在设定时间到来之前，再次触发了这个事件，则重新开始计时

    var timer = null;
    document.body.onscroll = function(){
        clearTimeout(timer); // 清除未执行的代码，重置回初始化状态
        timer = setTimeout(function(){
            console.log("函数防抖");
        }, 300);
    };

二、函数节流

    var canRun = true;
    document.body.onscroll = function(){
        if(!canRun){
            // 判断是否已空闲，如果在执行中，则直接return
            return;
        }
        canRun = false;
        setTimeout(function(){
            console.log("函数节流");
            canRun = true;
        }, 300);
    };

 

转载于:https://www.cnblogs.com/wenzizaigaoge/p/10537160.html