节流防抖函数封装-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_68658847/article/details/145490311

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>封装节流防抖函数</title>
</head>

<body>
    <button>防抖</button>
    <button>节流</button>
    <script>
        // 使用方式
        // 节流：在单位时间内，只执行一次
        let btn1 = document.querySelectorAll('button');
        btn1[0].addEventListener('click', async () => {
            console.log(11111111);
            await sleep1(2000)
            console.log(2222222);

        })
        // 防抖：在单位时间内，只执行最后一次
        btn1[1].addEventListener('click', async () => {
            console.log(3333333);
            await sleep2(2000)
            console.log(44444444);

        })

        // 下面这三个变量放到封装的js的全局中,也就是最上面
        let timer = null; // 用于存储节流定时器
        let flag = true; // 节流阀
        let timer2 = null; // 用于存储防抖定时器

        // 节流函数
        const sleep1 = (ms) => {
            // 返回promise
            return new Promise((resolve, reject) => {
                // 节流
                if (flag) {
                    flag = false;
                    timer = setTimeout(() => {
                        flag = true;
                        clearTimeout(timer);
                        timer = null;
                        resolve();
                    }, ms);
                }
            });
        }

        // 防抖函数
        const sleep2 = (ms) => {
            clearTimeout(timer2);
            timer2 = null

            return new Promise((resolve, reject) => {
                timer2 = setTimeout(() => {
                    resolve();
                }, ms);
            });
        }

    </script>
</body>

</html>