函式防抖debounce與節流throttle

goldenlee發表於2019-04-01
函式
//防抖
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>
複製程式碼

相關文章