函数防抖和函数节流及其使用场景

本文已参与「新人创作礼」活动，一起开启掘金创作之路

函数防抖（debounce）

所谓函数防抖其实就是防止在过于频繁的操作下执行某个事件 为防止频繁调用，我们通常会在触发动作过N毫秒后，才会去执行该动作， 如果在这N毫秒内又触发此动作则将重新计算执行时间

接下来就用闭包来实现一个防抖函数吧：

// 防抖函数
function debounce(fun, waitTime) {
	let timer = null
	return function() {
		clearTimeout(timer)
		timer = setTimeout(() => {
			fun().apply(this, arguments)
		}, waitTime)
	}
}

// 防抖过后需要调用的方法
function doAjax() {
	console.log('事件执行')				
}

// 触发动作，比如点击、滚动等
window.onscroll = debounce(doAjax, 500)
// 或者
document.getElementById('div').onclick = function() {
	debounce(doAjax, 500)
}

至于在vue里面的写法就略过啦。。。毕竟照猫画虎

函数节流（throttle）

所谓节流函数其实也就是先设定一个执行周期， 当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期

function throttle(fun, wait, time) {
    let lastTime = null // 记录上一次运行的时间
    let timer = null
 
    return function() {
        let now = new Date().getTime()
        if (!lastTime ) lastTime = now
        // 当上一次执行的时间与当前的时间差大于设置的执行间隔时长的话，就主动执行一次
        if (now - lastTime > time) {
            clearTimeout(timer)
            fun().apply(this, arguments)
            lastTime = now // 执行函数后，马上记录当前时间
        } else {
            clearTimeout(timer)
            timer = setTimeout(() => {
                fun().apply(this, arguments)
            }, wait)
        }
    }
}
function doAjax() {
    console.log('节流执行')
}
window.onscroll = throttle(doAjax, 500, 2000)
// 或者
document.getElementById('div').onclick = function() {
	throttle(doAjax, 500, 2000)
}

函数节流（throttle）与 函数防抖（debounce）最终目的都是为了限制事件的频繁执行， 优化事件触发频率过而高导致浏览器响应速度跟不上触发频率，出现延迟，假死或卡顿的现象， 才能给用户端带来更好的体验