JavaScript防抖与节流

防抖（debounce）和节流（throttle）是在JS中处理高频事件时所作的一些优化操作，从而减轻浏览器负担，还不影响实际效果。

防抖

防抖定义：当持续触发事件时，一定时间内没有触发的时候，事件处理函数才会执行一次，如果在一定时间内重新触发了事件，那么重新开始延时执行事件处理函数。

手写防抖函数：

function debounce(func, await) {
    var timer = null;
    return function () {
        var args = arguments;
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(() => {
            func.apply(this, args)
        }, await);
    }
}

特点：当持续不断触发事件时，那么执行事件处理函数是永远不会触发的。

节流

节流定义：当持续触发事件，事件处理函数在第一次执行之后，该函数在指定的期限内不再工作，直到过了这段时间之后，再触发事件才重新生效。

手写节流函数：
版本1：标志变量+定时器

function throttle(func,await){
    var valid = true;
    return function(){
        if(!valid){
            console.log("繁忙中，暂不执行");
            return;
        }
        valid = false;
        var args = arguments;
        setTimeout(() => {
            func.apply(this,args);
            valid = true;
        }, await);
    }
}

版本2：时间戳

function throttle(func,await){
    var starttime = 0;
    return function(){
        var endtime = Date.now();
        var args = arguments;
        if(endtime - starttime > await){
            func.apply(this,args);
            starttime = endtime;
        }else{
            console.log("繁忙中，暂不执行")
        }
    }
}

特点：当持续不断触发事件时，那么执行事件处理函数会每隔一定周期触发一次。