函数节流和函数防抖

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

函数节流

      函数节流是通过声明一个变量当标志位，记录当前代码是否在执行，如果未执行，则可以正常触发方法执行。
      如果在规定时间内再次被触发，则取消这次方法执行，直接return。只到标志位显示为允许执行才可以在再次被触发的时候执行

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

函数防抖

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

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

转载于:https://juejin.im/post/5b0282296fb9a07ab5093414