JS深入基础之防抖和节流

防抖和节流

防抖

防抖的原理就是：你尽管触发事件，但是我一定在事件触发 n 秒后才执行，如果你在一个事件触发的 n 秒内又触发了这个事件，那我就以新的事件的时间为准，n 秒后才执行，总之，就是要等你触发完事件 n 秒内不再触发事件，我才执行。

写个带取消功能的debounce函数,核心思想就是只要你调用一次，我就先把这个计时器clear掉。重新来设置一个计时器。

function debounce(func,wait) {
    var timeout 
    var debounce = function(){
        var context = this
        var args = arguments
        clearTimeout(timeout)
        timeout = setTimeout(() => {
            func.apply(context,args)
        }, wait);
    }
    debounce.cancel = function(){
        clearTimeout(timeout)
        timeout = null
    }
    return debounce
}

节流

节流的原理很简单：

如果你持续触发事件，每隔一段时间，只执行一次事件。

根据首次是否执行以及结束后是否执行，效果有所不同，实现的方式也有所不同。 我们用 leading 代表首次是否执行，trailing 代表结束后是否再执行一次。

关于节流的实现，有两种主流的实现方式，一种是使用时间戳，一种是设置定时器。

当触发事件的时候，我们设置一个定时器，再触发事件的时候，如果定时器存在，就不执行，直到定时器执行，然后执行函数，清空定时器，这样就可以设置下个定时器。

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