定时器

js 点击按钮开启倒计时，怎么防止连续点击按钮，倒计时不受影响

解决方案 »

  1.   

    setInterval轻松搞定if (this.Querytime == 0) {
                        this.Querytime = 10;
                        const timer = setInterval(() => {
                            if (!this.Querytime) {
                                clearInterval(timer);
                            } else {
                                this.Querytime = this.Querytime - 1;
                            }
                        }, 1000);
                    } else {
                        this.$info(`操作太快啦，请${this.Querytime}秒~~`);
                        return;
                    }
      

  2.   


    let setTime = null
    exe()
    function exe(){
      if(setTime){clearTimeout(setTime)}
      setTime = setTimeout(function(){
        console.log("=======")
        //你的代码
      })
    }
    // 不建议弹出什么点击太频繁之类的提示框， 用户体验太差
      

  3.   

    这个问题的焦点在点击按钮防止连续点击，不在于倒计时，
    所以我直接使用setTimeout来防止连续点击，而倒计时代码我就不参合了，
    毕竟楼上这么多setInterval
      

  4.   

    第一次点击后，将点击按钮设置为不可用  disabled=true
      

  5.   

    var 一个变量，赋值为false，计时开始时为true，判断下这个变量就可以了。
      

  6.   

    <body>
    <button onclick="btn()">click</button>
    <span id="span1">10</span>
    <script>
    let span1 = document.getElementById("span1");
    let isClick = false;
    function btn () {
    let count = 10;
    if (isClick == false) {
    isClick = true;
    let time = setInterval(function (){
    count--
    span1.innerHTML = count
    if (count <= 0) {
    clearInterval(time)
    span1.innerHTML = "点击重新开始"
    isClick = false
    } }, 1000)
    }

    }
    </script>
    </body>