Question

在单击具有 id下一问题的按钮时，会将 AJAX 请求发送到服务器，并加载新任务。我想在加载新任务时重新启动计时器。在AJAX中，成功后我想重置计时器。但是问题是许多 setInterval 都需要在单击按钮后才能开始。如何避免呢？

    var timer;
var countdownfunction;
var countDownTime;

timer = function (){

    clearInterval(countdownfunction);

    countDownTime = $("#timer").attr("data-timer-val");

    var countdownfunction = setInterval(function() {

        if(countDownTime < 10 ){
            var temp = "0" + countDownTime;
            $("#time").text(temp);
        }else{
            $("#time").text(countDownTime);
        }


        countDownTime = countDownTime - 1;



        if (countDownTime < 0) {
            clearInterval(countdownfunction);
            $("#time-expired").text("Please click next problem.");
        }

    }, 1000);
} ;


$(document).ready(function(){
    timer();
});


$(document).ready(function(){

    $("#next-problem").on('click', function(){

        $.ajax({
            type : 'POST',

            url : '/test/next-problem/',

            success : function(data){
                // console.log(data);
                $("#problem-content").html(data);
                clearInterval(countdownfunction);
                timer();

            },

        });

    });

});

Answer 1

从以下行中删除var：

var countdownfunction = setInterval(function() {

由于这个var，您有两个countdownfunction范围不同的值，因此，当您调用clearInterval时，直到该计时器达到{{1} }，因此您可能有多个计时器相互叠加运行。

在此处删除-1后，您现在将拥有一个全局范围的变量，可以清除该变量并重新为其分配值。

如何使JavaScript倒数计时器在单击按钮时一次又一次地工作？

1 个答案: