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

  1. 作用：防止用户在短时间内，大量、高频的重复点击按钮，导致触发大量请求。
  2. 应用场景：用户注册。
  3. 知识点：setTimeout 、clearTimeout
  4. 概念与区别：
  • 防抖：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>
posted @ 2021-09-21 13:12  Huathy  阅读(31)  评论(0)    收藏  举报  来源