防抖和节流

//防抖
在第一次触发事件时，不立即执行函数，而是给出一个期限值
效果：如果短时间内大量触发同一事件，只会执行一次函数。
对于短时间内连续触发的事件（上面的滚动事件），防抖的含义就是让某个时间期限（如上面的1000毫秒）内，事件处理函数只执行一次。


function debounce(func, wait){
    let timeout;
    return function(){
        if(timeout){
            clearTimeout(timeout)
        }
        timeout = setTimeout(() => {
            func.apply(this, arguments)
        }, wait)
    }
}

//节流（冷却时间）
让函数执行一次后，在某个时间段内暂时失效，过了这段时间后再重新激活（类似于技能冷却时间）
效果：如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效。


function throttle(func, wait){
    let timeout;
        return function(){
            if(!timeout){
                timeout = setTimeout(() => {
                    timeout = null;
                    func.apply(this, arguments)
                }, wait)
            }
    }
}

image.png