节流和防抖通用函数的封装以及调用方式

最新推荐文章于 2023-08-07 09:12:36 发布

予倾

最新推荐文章于 2023-08-07 09:12:36 发布

阅读量397

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/QZ9420/article/details/124180827

版权

js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript中的节流(throttle)和防抖(debounce)两种常见性能优化技术，通过实例演示了如何在滚动事件中实现这两个功能，帮助开发者理解和使用这些在高频率事件处理中的关键技巧。

摘要由CSDN通过智能技术生成

通用函数：

// 节流
function throttle(callback, wait) {
    let start = 0
    return function(e) {
        const now = Date.now()
        if (now - start >= wait) {
            // callback(e)
            callback.call(this, e)
            start = now
        }
    }
}

// 防抖
function debounce(callback, wait) {
    let timer = null
    return function(e) {
        if (timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(()=> {
            callback(e)
            timer = null
        }, wait)
    }
}

使用方法：

<script>
    // 节流
    window.addEventListener('scroll', throttle(function(e) {
        console.log(e)
    }, 1000))
    // 防抖
    window.addEventListener('scroll', debounce(function(e) {
        console.log(e)
    }, 1000))
</script>