我正在尝试运行一个创建弹出窗口的代码。弹出窗口打开后,会初始化一个计数器,该计数器每秒递增一次并使用setInterval。但是,当我取消进程(clearInterval及其中)并重新打开弹出窗口时,计数器会初始化,但每秒递增两次。您可以在下面找到我的jquery脚本以供参考。请让我知道为什么我会观察这种奇怪的行为。请原谅脏代码,如果我的jquery做法错误,请随时指出。我对前端开发相当新,因此它可能是一个微不足道的问题,但我似乎无法在网上找到任何理由。期待任何投入。
// Semicolon (;) to ensure closing of earlier scripting
// Encapsulation
// $ is assigned to jQuery
;
(function($) {
var counter2 = 0;
var counter3 = 60;
var counter4 = 60;
var interval2;
var timeNow;
var canFlag = 0;
// DOM Ready
$(function() {
var checker = '';
var popClicked = 0;
var timeout = 0;
// Binding a click event
// From jQuery v.1.7.0 use .on() instead of .bind()
$('#my-button').bind('click', function(e) {
checker = $('#log').text();
popClicked = 1;
if (checker==="somecondition") {
//alert(checker);
// Prevents the default action to be triggered.
e.preventDefault();
// Triggering bPopup when click event is fired
$('.element_to_pop_up').bPopup();
}
else {
alert('Oops.. error message');
}
});
$('#popNext').click(function() {
currTopic = randTopic();
$('#newTopic').html(currTopic);
$('#pg1pop').hide();
$('#pg2pop').show();
var counter = 10;
var counterFlag = 0;
$('#pg2Ref').click(function() {
currTopic = randTopic();
$('#newTopic').html(currTopic);
counter = 10;
});
$('.b-modal, .b-close').click(function() {
canProcess();
$('#pg2pop').hide();
$('#timeout').hide();
$('#pg1pop').show();
});
$('#pg2Cont').click(function() {
counter2 = 0;
counter3 = 60;
counter4 = 60;
counterFlag = 1;
$('#pg2pop').hide();
$('#pg3pop').show();
//alert("counter 1-4: "+counter+"-"+counter2+"-"+counter3+"-"+counter4+"-"+"cflag - "+counterFlag+"-"+"timeout flag"+timeout);
interval2 = setInterval(function() {
counter2++;
if (counter2 == 146) {
// Display a login box
timeNow = (new Date).getTime();
$('#pg3con').html('Well done!<br>Process is over. Please wait, we are processing your data. ');
clearInterval(interval2);
stopProcess(currTopic);
}
else if (counter2 == 1) {
$('#pg3con').html('Your topic is:<br>"' + currTopic + '"<br>& you have <span id="sec2" style="font-size:120%;">60</span> seconds to start!<br><br><button id="skip" style="width: auto; margin:auto">Skip</button>');
$('#skip').click(function() {
counter2 = 53;
});
}
else if (counter2 > 1 && counter2 <= 53) {
counter4--;
$('#sec2').html(counter4);
}
else if (counter2 == 54) {
$('#pg3con').html('Relax! ');
}
else if (counter2 == 58) {
$('#pg3con').html('Your time starts in 3..');
}
else if (counter2 == 59) {
$('#pg3con').html('Your time starts in 2..');
}
else if (counter2 == 60) {
$('#pg3con').html('Your time starts in 1..');
}
else if (counter2 == 61 && timeout == 0) {
$('#pg3con').html('<div class="w40" class="tCenter"><p>Your topic:<p><br><p>' + currTopic + '</p></div><div class="w60"><div>You have<br></div><div id="sec" style="font-size:600%;">60</div><div> Secs</div></div><br><br><button class="contentBox contentBoxOrange" id="continue" style="width: auto; margin:auto">Continue</button>');
$('#popupLog').show();
$('#continue').click(function() {
counter2 = 121;
});
startProcess();
}
else if (counter2 > 61 && counter2 <= 121) {
counter3--;
$('#sec').html(counter3);
}
else if (counter2 > 121 && counter2 < 146) {
$('#pg3con').html('Some text:<br>"Some text"<br><br><button id="finish" style="width: auto; margin:auto">Finish</button>');
$('#finish').click(function() {
counter2 = 145;
});
}
$('.b-modal, .b-close').click(function() {
canProcess();
canFlag =1;
clearInterval(interval2);
$('#pg3con').html('<img src="path/to/images/ajax-loader.gif">');
$('#pg3pop').hide();
$('#pg1pop').show();
});
}, 1000);
});
var interval = setInterval(function() {
if(counter > 0){
counter--;
}
$('#secs').html(counter + " seconds");
if (counter === 0 && counterFlag === 0) {
// Display a login box
timeout = 1;
counterFlag = 1;
clearInterval(interval);
$('#pg2pop').hide();
$('#popupLog').hide();
$('#timeout').show();
}
}, 1000);
});
});
})(jQuery);
可重复:始终; 可能原因:缺乏知识/逻辑错误
编辑:如果取消两次,计数器会递增3,依此类推。
答案 0 :(得分:6)
我没有复制或测试过您的整个脚本(如评论中所述,我们不在这里调试),但我的建议是在开始之前清除您的间隔,而不是之后。请尝试以下方法:
clearInterval(interval);
interval = setInterval(function() {
// do whatever here
}, time);
通过这种方式,您可以确保正在进行的任何时间间隔都不会消失。
答案 1 :(得分:0)
也许知道setinterval的作用是好的。
所以每个例子:
var myInterval = setInterval(function() {
//some code here
}
变量&amp; myInterval&#39;的值不是你所期望的功能。 但该值是整数。
因此,通过在代码中再次设置间隔,此整数从(每个示例)1更改为2。 如果你在再次运行之前没有清除间隔,那么你要做的就是清除最新的间隔。第一个尚未清除。
另外要小心运行间隔,在你知道之前你已经在你的脚本中运行了几个。