防抖与节流

问号制造商

已于 2023-01-15 22:32:13 修改

阅读量160

点赞数

分类专栏： JavaScript 文章标签： javascript 开发语言 Powered by 金山文档

于 2023-01-13 20:39:26 首次发布

本文链接：https://blog.csdn.net/sxp19980829/article/details/128679337

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

防抖：function debounce(callback,delay)

重新计时。从某次操作(callback被触发)开始计时，若在设置时间（delay）内再次触发操作，则重新开始计时；若在设置时间内未再次触发，则在本次计时结束时执行回调函数callback。

function debounce(callback,delay){
	let timeout=null
    return ()=>{
        //如果delay时间内重新触发，则清空定时器，重新计时
        if(timeout) clearTimeout(timeout)
        //隔delay时间执行callback
        timeout=setTimeout(()=>{
            callback
        },delay)
    }
}

节流：function throttle(callback,delay)

在指定时间内只执行一次。在delay时间段内，不管callback被触发多少次，只算作一次。

function throttle(callback,delay){
    let timer=null
    return ()=>{
        //如果计时器为空，则可以被触发
        if(!timer){
            //触发时，给计时器赋值，使其不可再被触发
            timer=setTimeout(()=>{
                //在delay时间段内执行一次callback，执行完成后，timer置为空，以便下一次被触发
                callback
                timer=null
            },delay)
        }
    }
}

附小实例的完整代码

<html>
    <body>
        <div>
            <input type="text">
            <div style="width:100px;height: 100px;background-color: pink;" id="div1"></div>
        </div>
    </body>
    <script>
        let input=document.querySelector('input')
        let div=document.getElementById('div1')

        function fn(e){
            ((e.target.value)&&console.log(e.target.value))||console.log('节流',e.target)
        }

        // setTimeout(callback,after,args1,args2)
        /*
            setTimeout的callback函数不能带参数，解决方式：
            用匿名函数包裹，在如下代码中用箭头函数包裹了callback
        */

        // 防抖
        function debounce(fun,delay){
            let timeout=null
            return (args)=>{
                if(timeout) clearTimeout(timeout)
                timeout=setTimeout(()=>{
                    fun(args)
                },delay)
            }
        }
        // 节流
        function throttle(fun,delay){
            let timer=null
            return (args)=>{
                if(!timer){
                    timer=setTimeout(()=>{
                        fun(args)
                        timer=null
                    },delay)
                }
            }
            
        }

        let deb=debounce(fn,1000)
        input.addEventListener('input',e=>{
            deb(e)
        })
        let thro=throttle(fn,1000)
        // 鼠标移动时打印“节流”
        div.addEventListener('mousemove',(e)=>{
            thro(e)
        })
        
    </script>
</html>