防抖与节流

最新推荐文章于 2024-02-29 16:05:00 发布

不要葱花

最新推荐文章于 2024-02-29 16:05:00 发布

阅读量209

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/moqiuqin/article/details/102619752

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一开始了解防抖和节流的时候网上查了一下是什么意思，结果看了解释基本都是很术语的解释，没有通俗易懂的说法，就是限制高频事件的触发，两个的解释就是词汇的互换

防抖：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间
节流：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率

直到在看到一个老哥的大白话解释才明白，总结就是：

防抖：你点过按钮之后，再狂点按钮有用算我输，等你冷静下来我才读条，读条完了才给你点击有效。
节流：游戏里面的技能冷却功能，点过之后到了时间就给你点。

代码如下：

<body>
    <div class="box">
        <div>
            <button id="fangdou">防抖</button>
            <button id="jieliu">节流</button>
        </div>
    </div>
    <script>
        let fangdou = document.getElementById("fangdou");
        let jieliu = document.getElementById("jieliu");
        fangdou.addEventListener("click", debounce());
        jieliu.addEventListener("click", throttle());
		//防抖
        function debounce() {
            let timeout = 0;
            return function () {
                clearTimeout(timeout);
                timeout = setTimeout(() => {
                    test();
                }, 2000);
            }
        }
        //节流
        function throttle() {
            let flag = true;
            return function () {
                if (!flag) {
                    return
                }
                // 点击时候立即执行，不进行等待
                if (flag) {
                    jieliu.disabled = true;
                    test();
                }
                //执行动作之后改变标志，只有到达规定时间后标志才会改变，此时方法才能往下进行
                flag = false;
                setTimeout(() => {
                    jieliu.disabled = false;
                    flag = true;
                }, 2000);
            }
        }
        function test() {
            console.log("不要着急！！！");
        }
    </script>
</body>