防抖

什么是防抖：事件被触发n秒后再执行回调，如果期间再有触发，则重新计时。

什么时候用：搜索框输入搜索时、点击请求避免用户多次点击等场景。

实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">按钮</button>
    <script>
        const btnDom = document.getElementById('btn')
        btnDom.addEventListener('click', debounce(handleClick, 1000))

        function handleClick() {
            console.log('click')
        }

        function debounce(func, wait) {
            let timer = null

            return function() {
                const context = this
                const args = arguments

                if (timer) {
                    clearTimeout(timer)
                    timer = null
                }

                timer = setTimeout(() => {
                    func.apply(context, args)
                }, wait)
            }
        }
    </script>
</body>
</html>

节流

什么是节流：事件触发后单位时间只执行一次回调，如果多次触发，只有一次生效。

什么时候用：scroll函数的监听事件等

实现方式1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">按钮</button>
    <script>
        const btnDom = document.getElementById('btn')
        btnDom.addEventListener('click', debounce(handleClick, 1000))

        function handleClick(e) {
            console.log('e========', e)
        }

        function debounce(func, wait) {
            let currentTime = Date.now()

            return function() {
                const context = this
                const args = arguments
                let clickTime = Date.now()

                if (clickTime - currentTime > wait) {
                    func.apply(context, args)
                    currentTime = clickTime
                }
            }
        }
    </script>
</body>
</html>

实现方式2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">按钮</button>
    <script>
        const btnDom = document.getElementById('btn')
        btnDom.addEventListener('click', debounce(handleClick, 1000))

        function handleClick(e) {
            console.log('e========', e)
        }

        function debounce(func, wait) {
            let timer = null

            return function() {
                const context = this
                const args = arguments

                if(!timer) {
                    timer = setTimeout(() => {
                        func.apply(context, args)
                        clearTimeout(timer)
                        timer = null
                    }, wait)
                }
            }
        }
    </script>
</body>
</html>

节流和防抖不会，还说自己基础好？

防抖

节流