js多次触发事件,在一定延迟内只执行一次 (事件累加)

时间:2023-03-08 17:36:38
js多次触发事件,在一定延迟内只执行一次 (事件累加)

  js多次触发事件,在一定延迟内只执行一次的案例:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
          .div{
            width:200px;
            height:200px;
            background:red;
            transition:width 2s linear 0s;
          }
        </style>
      </head>
      <body>
        <div class="div"></div>
      </body>
    </html>
    <script>
      var div=document.querySelectorAll(".div")[0];
      var num=0;
      var t=null;
      //事件累加的功能
      //js 多次触发点击事件,在一定延迟内只执行一次
      div.onclick=function(){
        if(t!=null){
          clearTimeout(t)
        }
        t=setTimeout(function(){
          num++;
          console.log(num);
        },500)
      }

    </script>