js 防抖 节流

为什么需要

在开发中，有部分的行为会频繁的触发事件执行，对于dom操作，资源请求等耗性能的处理，很可能导致界面卡顿，甚至浏览器的奔溃

函数防抖 函数节流就是为了解决类似的需求

函数防抖

在函数需要频繁触发的情况下，只要有足够空闲的时间，才执行一次。

应用场景

• 实时搜索 input输入防抖示例
• 拖拽

方法实现

function debounce(fun, delay=100){
	let timer = null
	return function(...args){
		timer && clearTimeout(timer)
		timer = setTimeout(()=>{
			fun.call(this, ...args)
		}, delay)
	}
}

// ----
function log(){
	console.log('log')
}
let dlog = debounce(log,0)
for(let i = 0; i < 100; i++){
	dlog()
}
// dlog 只会执行一次

函数节流

是预定一个函数只有在大于等于执行周期时才执行，周期内调用不执行。

应用场景

• 窗口调整 resize
• 页面滚动 scroll
• 抢购疯狂点击 mousedown

方法实现

// 节流 等上一次执行 一定时间后才能再次执行
function throttle(handle, wait=1000){
    let lastTime = 0
    return function(){
        let now = Date.now()
        if(now - lastTime > wait){
            handle.apply(this, [].slice.call(arguments, 0))
            lastTime = now
        }
    }
}

function buy(e){
    console.log('buy',e)
}
btn.onclick = throttle(buy,1000)