函数防抖debounce与节流throttle

比眉伴天荒 2022-04-27 17:04 176阅读 0赞

//防抖
    function debounce(fn,delay){
        let timer = null
        return (...args)=>{
            if(timer) clearTimeout(timer)
            timer = setTimeout(()=>{
                fn.apply(this,args)
            },delay)
        }
    }
    
    // 节流throttle
    function throttle(fn,delay){
        let late = +new Date()
        return function(...args){
            let now = +new Date()
            if(now - late > delay){
                late = now
                fn.apply(this,args)
            }
        }
    }
    复制代码

示例：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        输入框1：<input type="text" id="input1" /><br/>
        输入框2：<input type="text" id="input2" />
        <script>
            // 防抖debounce
            function debounce(fn,delay){
                let timer = null
                return (...args)=>{
                    if(timer) clearTimeout(timer)
                    timer = setTimeout(()=>{
                        fn.apply(this,args)
                    },delay)
                }
            }
    
            // 节流throttle
            function throttle(fn,delay){
                let late = +new Date()
                return function(...args){
                    let now = +new Date()
                    if(now - late > delay){
                        late = now
                        fn.apply(this,args)
                    }
                }
            }
    
    
            function getVal(e){
                console.log(e.target.value);
            }
    
            const input1 = document.querySelector('#input1');
            const input2 = document.querySelector('#input2');
            input1.addEventListener('keyup',debounce(getVal,200))
            input2.addEventListener('keyup',throttle(getVal,500))
        </script>
    </body>
    </html>
    复制代码