js之防抖和节流

@万里挑一

于 2023-09-23 15:07:17 发布

阅读量94

点赞数 1

分类专栏： javascript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_59599812/article/details/133206832

版权

javascript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1.防抖

防抖：多从操作同一个事件，以末次为准（只执行最后一次操作）。

原理：延迟执行下一次事件触发 “在某个时间段内执行一次事件”。

作用：降低代码执行频率。

var timer;
    btn.onclick = function(){
        clearTimeout(timer);
        timer = setTimeout(function(){
            console.log("hello");
        },1000)
    }

2.节流

节流：在固定的时间内，多次操作一个事件，以首次为准（只执行一次操作），固定的时间内不能触发第二次事件。

原理：延迟执行下一次事件触发 “在某个时间段内执行一次事件”。

作用：降低代码执行频率。

<body>
    <button id="btn">按钮</button>
</body>

var btn = document.querySelector('#btn');
 var flag = true; // 节流阀
    btn.onclick = function(){
        if(flag == true){
            flag = false; //关闭阀门
            console.log("hello");

            setTimeout(function(){
                flag = true; //打开阀门

            },1000); //1秒之后打开节流阀“一秒之后可以触发第二次事件”。
        }
    }

@万里挑一

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js之防抖和节流

节流：在固定的时间内，多次操作一个事件，以首次为准（只执行一次操作），固定的时间内不能触发第二次事件。原理：延迟执行下一次事件触发 “在某个时间段内执行一次事件”。防抖：多从操作同一个事件，以末次为准（只执行最后一次操作）。原理：延迟执行下一次事件触发 “在某个时间段内执行一次事件”。作用：降低代码执行频率。作用：降低代码执行频率。
复制链接

扫一扫