防抖:触发高频函数事件后,n秒内函数只能执行一次,如果在n秒内这个事件再次被触发的话,那么会重新计算时间。通常使用的场景是:用户输入,只需再输入完成后做一次输入校验即可。
节流:所谓节流,就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。通常使用场景: 滚动条事件 或者 resize 事件,通常每隔 100~500 ms执行一次即可
//防抖
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)
}
}}