防抖&节流

最新推荐文章于 2020-06-30 10:29:58 发布

xm2by

最新推荐文章于 2020-06-30 10:29:58 发布

阅读量244

点赞数

分类专栏： javascript 文章标签：防抖节流性能优化

本文链接：https://blog.csdn.net/XuM222222/article/details/84746184

版权

javascript 专栏收录该内容

72 篇文章 2 订阅

订阅专栏

防抖&节流

1、防抖：

防抖：对于高频持续触发事件，通过设置定时器来延迟事件执行，在未达到设定的延迟时间时，如果再次触发该事件，则重新计时；只有在延迟时间内不触发该事件，那么当达到延迟时间后才会执行该事件。

可以将防抖类比于坐电梯，电梯门从打开到关闭有个固定时间，如果在固定时间内外面没有人按开门键，那么到达固定时间后电梯门会自动关闭，如果在固定时间内，有人按了开门键，那么电梯将重新计时。

// 通过设置定时器实现
function debounce(fn, wait) {
    let timer
    return function () {
        // 保存fn函数执行时的this
        let context = this
        // 获取fn执行时的传参
        let args = arguments
        if(timer){
            clearTimeout(timer)
        }
        timer = setTimeout(()=>{
            fn.apply(context, args)
        }, wait)
        
    }
}

关键词：重新计时

使用场景：实时搜索、实时输入等场景

之前就曾用防抖方法优化项目中的实时搜索查询：vue项目中实时搜索功能的优化——减少请求次数与取消上一次请求

2、节流：

节流：对于高频持续触发事件，让其在一定时间内仅执行一次，可以通过设置时间戳或定时器的方法实现。

// 方法一：设置时间戳
function throttle(fn, wait){
    let previous = new Date()
    return function () {
        let context = this
        let args = arguments
        let now = new Date()
        // 一定时间内只执行一次
        if(now - previous > wait){
            fn.apply(context, args)
            previous = now
        }
    }
}

// 方法二：设置定时器
function throttle(fn, wait) {
    let timer
    return function() {
        let context = this
        let args = arguments
        if(!timer){
            timer = setTimeout(() => {
                fn.apply(context, args)
                timer = null
            }, wait)
        }
    }
}