Question

我正在使用setInterval和setTimeout来创建一个倒计时，但是当我在按钮上停止此操作时，单击它会在完成当前倒计时后停止。

我想要的是简单地创建一个带有interval的倒计时。当用户单击开始轮询，它将每隔10秒发送一个ajax请求，显示下一个请求的倒计时

我使用以下代码停止了Timer。这是可重复的超时。

$(document).on('click', '#stop_poll', function(){
        $('.my_clock span').html('0');
        for (var i = 1; i < activeCountdowns.length; i++)
            clearCountdown(i);

        clearInterval(interval);
        console.log(interval);
    })

var interval;
(function(){
    window.activeCountdowns = [];
    window.setCountdown = function (code, delay, callback, interval) {
        var timeout = delay;
        var timeoutId = setTimeout(function(){
            clearCountdown(timeoutId);
            return code();
        }, delay);
        window.activeCountdowns.push(timeoutId);
        setTimeout(function countdown(){
            var key = window.activeCountdowns.indexOf(timeoutId);
            if (key < 0) return;
            timeout -= interval;
            setTimeout(countdown, interval);
            return callback(timeout);
        }, interval);
        return timeoutId;
    };
    window.clearCountdown = function (timeoutId) {
        clearTimeout(timeoutId);
        var key = window.activeCountdowns.indexOf(timeoutId);
        if (key < 0) return;
        window.activeCountdowns.splice(key, 1);
    };
})();
var mySetInterval = function(time)
{
    myClearInterval();
    interval = setInterval(function(){
        var t = setCountdown(function () {
            $('.my_clock span').html('0');
        },  time * 1000, function (i) {
            $('.my_clock span').html(i / 1000);
        }, 1000);
    }, time * 1000);
}
var myClearInterval = function()
{
    clearInterval(interval);
}

$(document).ready(function () {
    $(document).on('click', '#stop_poll', function(){
        $('.my_clock span').html('0');
        for (var i = 1; i < activeCountdowns.length; i++)
            clearCountdown(i);
        
        clearInterval(interval);
        console.log(interval);
    })
  
  $(document).on('click', '#start_poll', function(){
      var pollinterval = 10
        setCountdown(function () {
            //some code
            },  pollinterval * 1000, function (i) {
                $('.my_clock span').html(i / 1000);
            }, 1000);
        mySetInterval(pollinterval);
    })
});

a#stop_poll {
    background: blue;
    color: #fff;
    padding: 5px;
}
button#start_poll {
    padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="submit" id="start_poll" name="start_poll" class="btn btn-primary">Start Polling</button>
<a id="stop_poll" name="stop_poll" id="stop_poll" class="btn btn-default">Stop Polling</a>
<div class="my_clock alert alert-info">
     <p>next poll in <span>0</span>s</p>
 </div>

Answer 1

我认为，这是您要执行的操作的更简单解决方案。在ajax函数中，在我发表评论的位置开始您的pollServer()请求。

var serverPollIntervall = 10;
var serverPollInt;

$(document).ready(function(){
   $('.my_clock').html("<p>waiting for poll</p>");
   $('#start_poll').on('click',function(){
      pollServer();
   });

   $('#stop_poll').on('click',function(){
      clearInterval(serverPollInt);
      $('.my_clock').html("<p>waiting for poll</p>");
   });
})

function pollServer() {
  //do the countdown text
  var count = serverPollIntervall;
  
  serverPollInt = setInterval(function(){
	 count = count -1;
     $('.my_clock').html("<p>next poll in "+count+" s</p>");
    
     if(count == 0)
     {
       count = 10;
       //send the ajax request
     }
    
   },1000);
}

a#stop_poll {
    background: blue;
    color: #fff;
    padding: 5px;
}
button#start_poll {
    padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="submit" id="start_poll" name="start_poll" class="btn btn-primary">Start Polling</button>
<a id="stop_poll" name="stop_poll" id="stop_poll" class="btn btn-default">Stop Polling</a>
<div class="my_clock alert alert-info">

 </div>

clearTimeout和clearInterval无法正常工作

1 个答案: