造轮子学习之旅day1-防抖节流

学无止境 每日反思

今日主题： 防抖和节流

防抖和节流的目的都是在规避频繁触发回调导致的大量计算，影响页面性能。 简单的说就是将多次回调调用变为一次。防抖和节流的区别在于是第一次还是最后一次为准。

1. 节流 Throttle- 调用多次，只使第一次有效

含义：在一段时间内，不论触发多少次回调，都以第一次为准。例如输入框补全提示，只需要每两秒补全一次。

主要思路： 主要思路利用时间戳判断，每次调用判断和上一次调用的事件差异确定是否需要调用。throttle实际是一个工厂函数，可以将一个函数的封装为带有节流功能的函数。

功能实现：

module.exports.throttle = (fn, dealy) => {
	let last = 0; // 上次触发时间
    return (...args) => {
    	const now = + Date.now()
        console.log('call', now, last, delay)
        if(now > last + delay){
        	last = now
            fn.apply(this, args)
        }
    }
}

3. 防抖Debounce - 调用一次，最后一次为准

在一段时间内，不论触发多少次回调，都已最后一次为准。例如：以用户拖拽改变窗口大小，触发resize事件为例，会触发组件重新布局，这里面只有最后一次调用是有意思的。

主要思路： 使用定时器执行函数，新调用发生时如果旧调用没有执行就清除之前的定时器。

功能实现：

module.exports.debounce = (fn,delay) => {
	let timer
    return (...args) => {
    	// 判断定时器是否存在，清除定时器
        if(timer) {
        	clearTimeout(timer)
        }
        
        // 重新调用setTimeout
        timer = setTimeout(()=> {
        	fn.apply(this,args)
        }, delay)
    }
}

参考文章