防抖与节流（JavaScript）

防抖

<button>按钮</button>

let btn = document.getElementsByTagName('button')[0]
btn.onclick = function(){
     console.log('按钮被点击了')
 }

点击多次，被触发41次回调函数。

不断的点击按钮，就会触发该按钮的事件，打印多次。若事件回调为客户端请求数据，多次点击则会导致多次请求，会增加服务器压力，这时候就出现防抖操作。
所谓防抖，就是一直连续不断地点击按钮，只触发最后一次点击的事件回调函数，那么这样就只请求一次，大大减小服务器的压力。

let btn = document.getElementsByTagName('button')[0]
let t = null
btn.onclick = function(){
    if(t !== null){
        clearTimeout(t)
    }
    t = setTimeout(() => {
        console.log('按钮被点击了')
    }, 1000);    
}

点击多次，只触发最后一次回调函数。

封装一下：

let btn = document.getElementsByTagName('button')[0]
btn.onclick = debounce(function () {
    console.log('按钮被点击了')
},1000)

function debounce(fn,delay) {
   let t = null
    return function () {
        if (t !== null) {
            clearTimeout(t)
        }
        t = setTimeout(fn, delay)
    }
}

节流

所谓节流，就一段时间内，只执行一次某个操作，过了这一段时间，还有操作的话，继续执行新的操作。
也是上面那个按钮的例子，多次点击会触发多次事件回调。下面进行节流操作：

function throttle(fn, delay) {
    let t = null
    return function () {
        if (t !== null) {
            return
        }
        t = setTimeout(() => {
            fn()
            t = null
        }, delay);
    }
}

点击10次，仅触发2次，完成节流效果。