停止重复设置定时器函数jQuery
我不是jquery的专家，但我只是做了一个简单的代码来显示一个div，在点击另一个带有10秒计时器的div之后。
这是我的代码：
$(document).ready(function() {
$('.link').click(function() {
$('#my-timer').fadeIn('slow');
var settimmer = 0;
$(function(){
setInterval(function() {
var timeCounter = $("b[id=show-time]").html();
var updateTime = eval(timeCounter)- eval(1);
$("b[id=show-time]").html(updateTime);
if(updateTime == 0){
$('#my-timer').hide();
$('.download').fadeIn('slow');
}
}, 1000);
});
});
$(".download").hide();
$("#my-timer").hide();
});HTML：
<div class="link">Link</div>
<div class="download">Download</div>
<div style="display:none" id="my-timer">Page Will Redirect with in <b id="show-time">10</b> seconds<br />
</div>演示：http://jsfiddle.net/vuJZX/
我的问题是：
1:当第一次点击链接时，一切正常，但我只需要显示这个计时器一次！在演示中，你可以看到，在每10秒后，如果你点击链接，计时器将启动，并像这样计数，-1，-2，-3，-4...如何在10秒后停止和禁用此计时器？我需要在10秒后禁用计时器。
2:我需要显示这个计时器10秒，但如果你点击链接字3-4次，计时器将工作得很快！我想我的问题是计时器的速度！我不知道如何解释这个问题，但你可以尝试在演示链接，只需点击链接4-5次，看看计时器！
最后一个问题，我不知道我的代码是不是标准的。我是否需要更改代码或代码是否正确？
谢谢
回答 3
Stack Overflow用户
发布于 2012-09-16 11:10:19
我认为处理它的最简单的方法就是使用one。由于您只希望此事件触发一次，因此one将在第一次单击后解除绑定处理程序。
$('.link').one("click", function() {完成后，您还需要使用clearInterval来停止间隔。
需要注意的是，不要使用eval。在这种情况下，您应该使用parseInt，或者在javascript变量中维护数字。
http://jsfiddle.net/vuJZX/3
$('.link').one("click", function() {
$('#my-timer').fadeIn('slow');
var settimmer = 0;
var counter = 10;
var interval = -1;
$(function() {
interval = setInterval(function() {
var timeCounter = $("b[id=show-time]").html();
$("b[id=show-time]").html(counter--);
if (counter == 0) {
$('#my-timer').hide();
$('.download').fadeIn('slow');
clearInterval(interval);
}
}, 1000);
});
});Stack Overflow用户
发布于 2012-09-16 11:08:39
您可以使用jQuery unbind()函数和本机JavaScript clearInterval函数。
演示：http://jsfiddle.net/SO_AMK/rzrez/1/
Stack Overflow用户
发布于 2012-09-16 11:29:40
我只是在编辑你的小提琴。
var timeCounter = 10;
var istimerStart = false;
$(document).ready(function() {
$('.link').click(function() {
$('#my-timer').fadeIn('slow');
$(function(){
if(istimerStart == false){
setInterval(function() {
istimerStart = true;
timeCounter = $("b[id=show-time]").html();
var updateTime = eval(timeCounter)- eval(1);
$("b[id=show-time]").html(updateTime);
if(updateTime == 0){
$('#my-timer').hide();
$('.download').fadeIn('slow');
}
}, 1000);
}
});
});
$(".download").hide();
$("#my-timer").hide();
});http://jsfiddle.net/vuJZX/
你的错误:只要你点击链接，新的间隔就开始了，所以我设置了一个标志。
无用的建议:如果可能的话，定时器函数永远不要用document.ready写单独的函数。
(这不是一条规则，但为了避免bug，我遵循了这条规则)。
https://stackoverflow.com/questions/12444146
复制相似问题
腾讯云开发者
