Javascript中关于防抖与节流

Javascript中关于防抖与节流

防抖与节流本质上是优化高频率执行代码的一种手段

例如：浏览器的resize、scorll、keypress、mousemove等事件在触发时，会不断调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能

为了优化体验，需要对这种时间进行调用次数的限制，对此我们就可以使用防抖(debounce)和节流(throttle)的方式来减少调用频率

首先是定义

节流：n秒内只运行一次，若在n秒内重复触发，只有一次生效

防抖：n秒后再执行该事件，若在n秒内被重复触发，则重新计时

代码实现

节流

使用节流可以使用时间戳与定时器的写法

使用时间戳，事件会立即执行，停止触发后没有办法再次执行

function throttled1(fn, delay = 500) {
    let oldtime = Date.now()
    return function (...args) {
        let newtime = Date.now()
        if (newtime - oldtime >= delay) {
            fn.apply(null, args)
            oldtime = Date.now()
        }
    }
}

使用定时器写法，delay毫秒后第一次执行，第二次事件停止触发后依然会再一次执行

function throttled2(fn, delay = 500) {
    let timer = null
    return function (...args) {
        if (!timer) {
            timer = setTimeout(() => {
                fn.apply(this, args)
                timer = null
            }, delay);
        }
    }
}

可以将两者进行结合，实现更精确的节流

function throttled(fn, delay) {
    let timer = null
    let starttime = Date.now()
    return function () {
        let curTime = Date.now() //当前时间
        let remaining = delay - (curTime - starttime) //从上一次到现在剩余多少时间
        let context = this
        let args = arguments
        clearTimeout(timer)
        if (remaining <= 0) {
            fn.apply(context, args)
            starttime = Date.now()
        } else {
             timer = setTimeout(fn, remaining);
        }
    }
}

防抖

function debounce(func, wait) {
    let timeout;
    return function () {
        let context = this; //保存this指向
        let args = arguments; //拿到event对象
        clearTimeout(timeout)
        timeout = setTimeout(function(){
            func.apply(context, args)
        }, wait);
    }
}

区别

相同点：

都可以使用setTimeout来实现

目的都是，降低回调执行频率，节省计算资源

不同点：

函数防抖：在一段连续操作结束后，处理回调，利用clearTimeout和setTimeout实现，函数节流，在一段连续操作中，霉一段时间只执行一次，频率较高的事件中使用来提高性能

函数防抖关注一定时间内连续触发的事件，只在最后执行一次，而函数节流一段时间内只执行一次

例如，都设置时间频率为500ms，在2秒时间内，频繁触发函数，节流每隔500ms就执行一次，防抖不管调用多少次方法在2S后只会执行一次