函数节流和防抖

click scroll resize change这些事件会被频繁触发，如果改变了元素的位置，会引起回流和重绘，影响用户体验。对于优化这种现象，有节流和防抖两种方案。

防抖

函数防抖，通过 setTimeout 和clearTimeout来实现，延迟执行函数。如果函数多次触发，则把上次记录的延迟执行代码用 clearTimeout 清掉，重新开始。如果计时完毕，没有方法进来访问触发，则执行代码。

var timer = false;
document.getElementById("debounce").onscroll = function(){
    clearTimeout(timer); 
    timer = setTimeout(function(){
        console.log("函数防抖");
    }, 300);
};  

节流

函数节流是指一定时间内方法只执行一次。声明一个变量表示函数当前状态，如果在一定时间内再次被触发就直接 return 出去，如果没有就将状态改为已执行状态，执行完就将状态改回未执行状态。

var isRun = false;
document.getElementById("throttle").onscroll = function(){
    if(isRun){
        return;
    }
    isRun = true;
    setTimeout(function(){
        console.log("函数节流");
        isRun = false;
    }, 300);
};