如何让JavaScript倒数计时器在点击按钮时一次又一次地工作?
单击id为“下一个问题”的按钮时,会向服务器发送一个AJAX请求,并加载新任务。我想在加载新任务时重新启动计时器。在AJAX中,一旦成功,我想重置计时器。但问题是许多setInterval点击按钮即可开始。如何避免这种情况如何让JavaScript倒数计时器在点击按钮时一次又一次地工作?,javascript,jquery,Javascript,Jquery,单击id为“下一个问题”的按钮时,会向服务器发送一个AJAX请求,并加载新任务。我想在加载新任务时重新启动计时器。在AJAX中,一旦成功,我想重置计时器。但问题是许多setInterval点击按钮即可开始。如何避免这种情况 var timer; var countdownfunction; var countDownTime; timer = function (){ clearInterval(countdownfunction); countDownTime =
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();
},
});
});
});
var定时器;
var倒计时函数;
var停机时间;
定时器=函数(){
clearInterval(倒计时功能);
countDownTime=$(“计时器”).attr(“数据计时器val”);
var countdownfunction=setInterval(函数(){
如果(停机时间<10){
var temp=“0”+停机时间;
$(“#时间”).text(临时);
}否则{
$(“#时间”).text(倒计时);
}
countDownTime=countDownTime-1;
if(countdown<0){
clearInterval(倒计时功能);
$(“#时间已过期”).text(“请单击下一个问题”);
}
}, 1000);
} ;
$(文档).ready(函数(){
定时器();
});
$(文档).ready(函数(){
$(“#下一个问题”)。在('click',function()上{
$.ajax({
键入:“POST”,
url:“/test/next problem/”,
成功:功能(数据){
//控制台日志(数据);
$(“#问题内容”).html(数据);
clearInterval(倒计时功能);
定时器();
},
});
});
});
从以下行中删除var
:
var countdownfunction = setInterval(function() {
由于此var
您有两个不同范围的倒计时函数值
,因此当您调用clearInterval
时,在计时器达到-1
之前,您永远不会清除此特定的功能范围值,因此您可能会有多个计时器相互重叠运行
在这里删除
var
后,现在就有了一个全局范围的变量,可以清除并重新分配一个值。ajax请求在哪里?我在报纸上看不到code@CertainPerformance我认为不需要ajax代码。仅供参考ajax代码写在另一个文件中。您说要在新任务加载时恢复计时器,因此,了解超时何时发生以及如何在结束时触发事件对于了解如何在所需时间恢复超时至关重要。您需要在收到新任务后将“countDownTime”设置为新值。@CertainPerformance Ajax代码已添加到Hanks bud中。我已经找到了,那太傻了,我没有注意到。