[英]Jquery usage of setTimeout in loop
I want to change value of p from 10 to 1 with delay 10 seconds. 我想将p的值从10更改为1,并延迟10秒。
for (var i=0;i<9;i++) {
setTimeout(function(){$('#timer').text(10-i)}, 1000);
}
It takes value 1 for 1 second, I want it to become 10 then 9 then 8 etc. Here is fiddle . 它需要1秒钟的值1,我希望它变成10,然后是9,然后是8, 以此类推 。这是小提琴 。 What's my mistake?
我怎么了
Use setInterval for achieving this as :- 使用setInterval实现这一目的:-
var i=0;
var timer= setInterval(function(){
i++;
if(i==10){
clearInterval(timer);
}
$('#timer').text(10-i);
}, 1000);
In your code the for-loop wouldn't wait for the setTimeout
to complete . 在您的代码中,for循环不会等待
setTimeout
完成。 hence by the time setTimeout
waits .. for loop
is over . 因此,到
setTimeout
等待.. for loop
的时间结束时。 hence after one second as for loop
is over ..the value of i is 9 and 10-9=1 is shown .. 因此一秒钟
for loop
结束.. i的值为9且10-9 = 1 ..
Here is link http://jsfiddle.net/1g8e7qy4/22/ 这是链接http://jsfiddle.net/1g8e7qy4/22/
Sorry, but I have found another solution:) I hope it satisfies you. 抱歉,但是我找到了另一个解决方案:)我希望它能使您满意。
var count = 10;
function run(){
$('#timer').text(count--);
if(count>=0) {
setTimeout(run, 1000);
}
}
run();
You can use a recursive function to build this function: 您可以使用递归函数来构建此函数:
Here is working jsFiddle. 这是工作的jsFiddle。
var timing = 11;
function timingRun() {
if ( timing > 0 ) {
timing--;
$('#timer').text(timing);
setTimeout(function() {
timingRun();
},1000);
}else{
// if you need a loop add these lines
timing = 11;
timingRun();
}
}
timingRun();
Its common problem for such cases when you need to use sync processed data in async methods. 当您需要在异步方法中使用经过同步处理的数据时,这是常见的问题。 In you case you raise loop - its sync process, it increases
i
and run code you place text to closing bracket. 在这种情况下,您引发循环-它的同步过程将增加
i
并运行将文本放在右括号中的代码。 So for
increase i
and run you code on each iteration. 因此,
for
增加i
并在每次迭代中运行您的代码。 On every iteration you set new timeout, should be run in some time, its async. 在您设置新超时的每次迭代中,应在一段时间内运行,它是异步的。 So what happening on first
setTimeout
start ? 那么在第一次
setTimeout
启动时会发生什么? - Loop had already finished, i
is already 10 and setTimeout
use its callback. -循环已经完成,
i
已经10 setTimeout
了, setTimeout
使用了它的回调。
To resolve this task you have to use closure - immediately invoke function witch be called on every iteration with i
as param, and setTimeout inside this function. 要解决此任务,您必须使用闭包-在每次迭代中立即调用函数witch,并将
i
作为参数,并在此函数内使用setTimeout。 In this case param you passed will be stored in scope and could be used in timeout callback: 在这种情况下,您传递的参数将存储在范围中,并可以在超时回调中使用:
var timerNode = $('#timer'),
stepInSec = 1;
for (var i=10; i>=0; i--) (function(t) {
window.setTimeout(function() {
timerNode.text(t);
}, (10-t)*stepInSec*1000)
}(i))
var breakPoint =60;
(function delay(bk){
var counter=0;
var handle = setInterval(function(){
if( counter < bk){
counter +=1;
$('#timer').text(bk-counter);
}
else{
clearInterval(handle);
}
}, 1000);
}( breakPoint ) );
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.