函数防抖和函数节流两者都是优化高频率js代码执行的一种手段

函数防抖

在搜索框识别、用户名密码验证等场景下，可以使用函数防抖来减少计算，节省性能，使用户有更好的体验

代码如下，执行一次防抖函数debounce会定义一个定时器，在一定时间后执行传入的处理函数handle，如果再次执行函数防抖则会覆盖上次的定时器。

1
2
3
4
5
6
7
8
9
function debounce(handle, delay) {
    let timer = null
    return () => {
        clearTimeout(timer)
        timer = setTimeout(() => {
            handle()
        }, delay)
    }
}

函数节流

类似淘宝购物场景多次点击，或者通过页面视口变化改变根节点字体大小等场景，可以将多个访问缩减为一个访问，这时用节流函数可以提升用户体验

代码如下，主要为计算上一次执行处理函数handle与当前执行节流函数throttle的时间间隔，超过一个时间段才允许再次运行处理函数。

1
2
3
4
5
6
7
8
9
10
function throttle(handle, wait) {
    let last = 0
    return function () {
        const now = new Date().getTime()
        if(now - last > wait) {
            handle()
            last = now
        }
    }
}