js 防抖

最新推荐文章于 2024-08-09 00:05:00 发布

sylvia_0815

最新推荐文章于 2024-08-09 00:05:00 发布

阅读量146

点赞数

分类专栏：笔记文章标签： js javascript html

原文链接：https://github.com/PDKSophia/blog.io/blob/master/JavaScript%E7%AC%94%E8%AE%B0/JavaScript%E7%AF%87-%E9%98%B2%E6%8A%96%E5%92%8C%E8%8A%82%E6%B5%81.md

版权

笔记专栏收录该内容

58 篇文章 1 订阅

订阅专栏

防抖的本质就是将几秒内触发的事件，统一变成最后触发的事件。也可以说就是定时器的维护，一旦在定时器设置的时间内触发相同事件便重置定时器。

    // 包装事件的 todo 函数
    function todo (func, delay) {
        // 定义一个timer
        let timer = null
        // 返回一个函数，在函数中调用需要触发的func 
        return function () {
            // 通过 this 和 arguments 获取函数的作用域和变量, arguments[0] = func ， arguments[1] = delay
            let _this = this
            let argsArray = arguments

            clearTimeout(timer)
            timer = setTimeout(()=>{
                func.apply(_this, argsArray)
            }, delay)
        }
    }

    // 当用户滚时候调用的函数
    function handleScroll () {
        console.log('I am scrolling')
    }

    let el = document.getElementById('container')
    el.addEventListener('scroll', todo(handleScroll, 3000))

搬运自GitHub

https://github.com/PDKSophia/blog.io/blob/master/JavaScript%E7%AC%94%E8%AE%B0/JavaScript%E7%AF%87-%E9%98%B2%E6%8A%96%E5%92%8C%E8%8A%82%E6%B5%81.md