首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何让JavaScript倒计时器在点击按钮时一次又一次地工作?

如何让JavaScript倒计时器在点击按钮时一次又一次地工作?
EN

Stack Overflow用户
提问于 2018-08-27 02:15:34
回答 1查看 105关注 0票数 0

单击id为next-problem的按钮时,将向服务器发送AJAX请求,并加载新任务。我想在加载新任务时重新启动计时器。在AJAX中,如果成功,我想重置计时器。但问题是许多setInterval get都是在单击按钮时启动的。如何避免这种情况?

代码语言:javascript
复制
    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();

            },

        });

    });

});
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-08-27 03:41:54

从以下行中删除var

代码语言:javascript
复制
var countdownfunction = setInterval(function() {

由于这个var,您有两个不同作用域的countdownfunction值,因此当您调用clearInterval时,在该计时器到达-1之前,您永远不会清除这个特定的函数作用域的值,因此您可能会有多个计时器在彼此之上运行。

在这里删除var之后,现在就有了一个全局作用域的变量,可以清除该变量并重新赋值。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52029057

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档