1.javascript的函数节流
2.以window.onscroll事件为例
window.onscroll = function () {
console.log('触发了...')
}
这样当一次滚动时,一般都会触发 40-60次
函数节流就是需要,将40-60次限制一下,少一点的触发。
那怎么做呢?
- 每一次触发事件,我们都需要计算一个时间差(上一次触发的时间 - 当前触发的时间)
- 看这个时间差是否超过我们规定的合理时间
- 如果超过了,就可以触发
- 如果没有超过,就需要设置一个定时器,让事件在(还差的时间)里进行触发
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函数