防抖和节流
防抖(debouncing)
典型例子:限制 鼠标连击 触发。
当一次事件发生后,事件处理器要等一定阈值的时间,如果这段时间过去后 再也没有 事件发生,就处理最后一次发生的事件。
假设还差0.01
秒就到达指定时间,这时又来了一个事件,那么之前的等待作废,需要重新再等待指定时间
function debounce1(fn,wait = 1000){ let timeout = null return function () { clearTimeout(timeout) timeout = setTimeout(function () { fn.call(this,arguments) },wait) } }
节流(throttling)
可以理解为事件在一个管道中传输,加上这个节流阀以后,事件的流速就会减慢。
实际上这个函数的作用就是如此,它可以将一个函数的调用频率限制在一定阈值内,例如 1s,那么 1s 内这个函数一定不会被调用两次
function throttling(fn,wait) { let canRun = true return function () { if(!canRun) return canRun = false setTimeout(()=>{ fn.call(this,arguments) canRun = true },wait) } }