JavaScript函数防抖（anti-shake）节流（throttle）

Huathy-雨落江南，浮生若梦

已于 2023-02-09 16:22:07 修改

阅读量90

点赞数

分类专栏：前端html、css、js 文章标签： javascript html

于 2021-09-21 13:12:21 首次发布

本文为博主Huathy原创文章，遵循 CC 4.0 BY-NC-SA 版权协议。
未经许可不得转载！否则将依法追究相关责任。

本文链接：https://blog.csdn.net/qq_40366738/article/details/120397189

版权

前端html、css、js 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

作用：防止用户在短时间内，大量、高频的重复点击按钮，导致触发大量请求。
应用场景：用户注册。
知识点：setTimeout 、clearTimeout
概念与区别：

防抖：anti-shake 对于短时间内连续触发的事件，让某个时间期限内，事件处理函数只执行一次。
示例：
节流：throttle 对于短时间内大量触发的同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效。

<!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>JavaScript防抖节流</title>
</head>
<body>
    <button id="btn1">add 防抖</button>
    <button id="btn2">add 节流</button>
    <h3 id="num">数字</h3>
</body>
<script>
    let btn1 = document.getElementById("btn1");
    let btn2 = document.getElementById("btn2");
    let num = document.getElementById("num");
    let number = 0;
    let time1 ;
    let time2 ;
    btn1.onclick = function(){
        //重置回初始化状态
        if(time1){
            clearTimeout(time1);
        }
        time1 = setTimeout(() => {
            num.innerHTML = number++;
        }, 500);
    }
    
    let flag = true;
    btn2.onclick = function(){
        if(!flag){
           //休息时间 暂不接客
           return false 
       }
       // 工作时间，执行函数并且在间隔期内把状态位设为无效
        flag = false
        setTimeout(() => {
            num.innerHTML = number++;
            flag = true;
        }, 500)
    }
</script>
</html>

Huathy-雨落江南，浮生若梦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript函数防抖（anti-shake）节流（throttle）

作用：防止用户在短时间内，大量、高频的重复点击按钮，导致触发大量请求。应用场景：用户注册。知识点：setTimeout 、clearTimeout<h1>JavaScript防抖节流</h1>
复制链接

扫一扫