[英]JavaScript - setInterval / setTimeout & clearInterval, wont execute properly
[英]Javascript setTimeout not stopping on clearInterval()
當clearInterval()沒有停止時,你如何停止計時器?
此代碼的目的是將數字從0向上設置為動畫,直到它到達結尾(例如,動畫從0 ... 75%)。 但是當我調用clearInterval()時,計時器不會停止:
<div id="foo"></div>
<div id="bar"></div>
animate("99%", $("#foo")); // doesnt stop
animate("75%", $("#bar")); // doesnt stop
function loop(clr, clr2, ele, rand, last, delay) {
clearInterval(clr);
clearInterval(clr2);
inloop(clr, clr2, ele, rand, last, delay);
if (rand >= last) {
clearInterval(clr);
clearInterval(clr2);
}
else {
clr2 = setTimeout(function () {
loop(clr, clr2, ele, rand, last, delay);
}, 2500);
}
}
function inloop(clr, clr2, ele, rand, last, delay) {
ele.html((rand += 1) + "%");
if (rand >= last) {
clearInterval(clr);
clearInterval(clr2);
}
else {
clr = setTimeout(function () {
inloop(clr, clr2, ele, rand, last, delay);
}, delay);
}
}
function animate(end, display) {
var clr = null;
var clr2 = null;
var ele = null;
var rand = 0; // initial number
var last = 99; // last number
var delay = 5; // inner loop delay
ele = display;
ele.html("0%");
var idx = end.indexOf("%");
if (idx >=0) {
end = end.substring(0,idx);
}
last = parseInt(end);
loop(clr, clr2, ele, rand, last, delay);
}
您將clearTimeout()
與setTimeout()
。
您不要將clearInterval()
與setTimeout()
。 clearInterval()
與setInterval()
。
您的代碼中也存在結構問題。 您將clr和clr2作為參數傳遞,並期望修改它們的原始值,而不是。
您可以通過將它們放在一個對象中並像這樣傳遞對象來解決這個問題:
animate("99%", $("#foo"));
//animate("75%", $("#bar"));
function loop(timers, ele, rand, last, delay) {
clearTimeout(timers.clr);
clearTimeout(timers.clr2);
inloop(timers, ele, rand, last, delay);
if (rand >= last) {
clearTimeout(timers.clr);
clearTimeout(timers.clr2);
}
else {
timers.clr2 = setTimeout(function () {
loop(timers, ele, rand, last, delay);
}, 2500);
}
}
function inloop(timers, ele, rand, last, delay) {
ele.html((rand += 1) + "%");
if (rand >= last) {
clearTimeout(timers.clr);
clearTimeout(timers.clr2);
}
else {
timers.clr = setTimeout(function () {
inloop(timers, ele, rand, last, delay);
}, delay);
}
}
function animate(end, display) {
var timers = {clr: null, clr2: null};
var ele = null;
var rand = 0; // initial number
var last = 99; // last number
var delay = 5; // inner loop delay
ele = display;
ele.html("0%");
var idx = end.indexOf("%");
if (idx >=0) {
end = end.substring(0,idx);
}
last = parseInt(end);
loop(timers, ele, rand, last, delay);
}
工作jsFiddle: http : //jsfiddle.net/jfriend00/PEqeY/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.