防抖的两种操作

一个假的前端男

于 2020-10-27 21:32:19 发布

阅读量622

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签：前端

本文链接：https://blog.youkuaiyun.com/IT_iosers/article/details/109321326

js 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种常用的前端优化技术——防抖。通过设置延迟来减少重复事件触发导致的频繁操作，提高了用户体验并减少了不必要的资源消耗。文章通过一个具体的示例说明了如何使用JavaScript实现防抖功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

防抖：当事件被触发时，设定一个周期延迟执行动作，若期间又被触发，则重新设定周期，直到周期结束，执行动作

实现通过鼠标移动事件、改变num的值

    let num = 0
    let content = document.getElementById('box')
    function count() {
        content.innerHTML = num++
    }

//过两秒后执行   （延时执行）
    // function debounce(func, delay) {
    //     let timeOut = null
    //     return function () {
    //         if (timeOut) clearTimeout(timeOut)
    //         timeOut = setTimeout(function () {
    //             func.apply(this, arguments)
    //         }, delay)
    //     }
    // }

// 先执行 过2秒  （立即执行）

        function debounce(func,delay){
            let timeOut=null
            return function () {
                if(timeOut) clearTimeout(timeOut)

                let  flag=!timeOut   //用来判断是否有定时器的

                timeOut=setTimeout(()=>{   //增加一个定时器
                    timeOut=null   //清空当前定时器句柄
                },delay)

                //判断定时为空时 执行  所以第一次运行时执行
                if(flag){
                    func.apply(this,arguments)
                }

            }
        }

    content.onmousemove = debounce(count, 1000)