防抖/节流

Posted 2021-02-28 sheep2

个人总结

防抖

//一段时间不操作后才会触发事件 
function debounce(fn, wait) {
    let timer = null
    return function () {
	let args = arguments
	if (timer !== null) {
            //清除前面的定时器
	    clearTimeout(timer)    
	}
	timer = setTimeout(() => {
	    fn.apply(this, args)
	}, wait)
    }
}

function echo() {
    console.log(1)
}
window.onscroll = debounce(echo, 500)

节流

//时间戳
//第一次立即执行，最后一次触发后 再后面一次不会被触发 因为时间间隔小于delay
function throttle(fn ,delay) {
    let preTime = Date.now()
    return function () {
	let args = arguments
	let curTime = Date.now()
	//每delay秒执行一次
	if (curTime - preTime >= delay) {
	    fn.apply(this, args)
	    //执行完重新赋值
	    preTime = Date.now()
	}
    }
}

function echo() {
    console.log(1)
}
window.onscroll = throttle(echo, 500)

//定时器
//第一次不会立即执行，当停下滚动时，可能会因为delay时间未到的原因再执行一次
function throttle(fn, delay) {
    let timer = null
    return function () {
	let args = arguments
	if (!timer) {  //定时器为空时进入
	    timer = setTimeout(() => {
		fn.apply(this, args)
                //执行完初始化
		timer = null    
	    }, delay)
	}
    }
}

function echo() {
console.log(1)
}
window.onscroll = throttle(echo, 500)

//时间戳 + 定时器
//第一次立即执行  最后一次触发后也会执行
function throttle(fn, delay) {
    let timer = null
    let preTime = Date.now()
    return function () {
	//开局一个清除定时器
	clearTimeout(timer)
	let args = arguments
	let curTime = Date.now()
	//剩余时间
	let remainTime = delay - (curTime - preTime)
	//剩余时间为0立即执行
	if (remainTime <= 0) {
	    fn.apply(this, args)
	    preTime = Date.now()
	} else {
	    //还有剩余时间就等到0执行
	    timer = setTimeout(() => {
		fn.apply(this, args)
	    }, remainTime)
	}
    }
}

function echo() {
    console.log(1)
}
window.onscroll = throttle(echo, 500)

总结

• 看情况使用防抖或节流
• 防抖只会在不操作后的一段时间内执行一次
• 节流无论操作多频繁，说多少时间执行一次就执行一次