javascript的函数节流

1.javascript的函数节流

2.以window.onscroll事件为例

window.onscroll = function () {
    
    
	console.log('触发了...')
}

这样当一次滚动时，一般都会触发 40-60次
函数节流就是需要，将40-60次限制一下，少一点的触发。
那怎么做呢？

1. 每一次触发事件，我们都需要计算一个时间差(上一次触发的时间 - 当前触发的时间)
2. 看这个时间差是否超过我们规定的合理时间
3. 如果超过了，就可以触发
4. 如果没有超过，就需要设置一个定时器，让事件在(还差的时间)里进行触发

const throttle = function (func, wait) {
    
    
	let current = 0; // 上一次触发的时间,第一次肯定是0
	let setTimouId = null // 定时器的ID
	return function (...params){
    
    
		const time = + new Date() // 当前触发的时间
		const meetTime = wait - (time - current)
		// (time - current) 就是当前触发的时间 - 上一次触发的时间 (就是一个时间差)
		// 我们需要判断这个时间差是否超过我们规定的合理时间 wait
		if (meetTime <= 0) {
    
    
			// 小于或 = 0，就是满足了触发时间(条件)。直接触发事件
			func.call(this, ...params)
			// 事件被触发了，我们需要记录这次触发的时间
			current = + new Date() // 记录当前触发的时间
		} else if (!setTimouId) {
    
    
			// 只有当定时器还没设置，我们才会重新设置一个定时器.
			setTimouId = setTimeout(() => {
    
    
				func.call(this, ...params)
				// 触发完了之后，我们需要记录这次触发的时间
				current = + new Date()
				// 我们也需要，清除这个定时器
				clearTimeout(setTimouId)
				setTimouId = null;
			}, meetTime)
			// 我们这个定时器是，在还差多少时间才会触发的
			// 所以设置定时器触发的时间为 meetTime
		}
	}
}
window.onscroll = throttle(send, 100)
// 我们规定，合理的触发时间为 100毫秒
// 每隔100毫秒，就触发send函数