This is an example:
function func1()
{
setTimeout(function(){doSomething();}, 3000);
}
for(i=0;i<10;i++)
{
func1();
}
after executing it , the delay happens only in the first loop, but it didn't happen in the rest of the loops in that 'for' expression.
I want to make the delay happen in all of the loop and not only in the first time.
What's wrong in my code ?
You are scheduling 10 calls, but the problem is all are getting scheduled for the same time, ie after 3 seconds.
If you want to call them incrementally then you need to increase the delay in each call.
A solution will be is to pass a delay unit value to the func1 like
function func1(i) {
setTimeout(function() {
doSomething();
}, i * 500);//reduced delay for testing
}
for (i = 0; i < 10; i++) {
func1(i + 1);
}
var counter = 0;
function doSomething() {
snippet.log('called: ' + ++counter)
}<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<!-- To show result in the dom instead of console, only to be used in the snippet not in production -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
setInterval.
The loop will schedule 10 timeouts all to be completed after 3 seconds. You can use recursion with setTimeout:
function loopAsync(delay, n, f) {
setTimeout(function() {
if (n > 0) {
f()
loopAsync(delay, n - 1, f)
}
}, delay)
}
loopAsync(3000, 10, doSomething)
What is heppening is that you are calling 10 times (without delay) func1() then what you have is 10 functions all on the same time, the solution is simple, use setInterval, here is a fiddle
If you want iterate with constant delay, IMHO you better use setInterval:
var loops = 9,
intervalId = setInterval(function () {
// My super code goes here
console.log(loops);
loops-- <= 0 && (clearInterval(intervalId));
}, 3000);
I've made a jsfiddle for you.
The for loop is running continuously so each call is 3000 millisecond of that call. Resulting in no delay between two calls. For better understanding, loop call func1 at time t and t + 1. So it will execute at t + 3000 and T + 3001 leaving no difference.
You can try below approach :-
function func1(i){
setTimeout(function(){doSomething();}, i * 3000);
}
for(i=i;i<=10;i++){
func1(i);
}
Note:- Loop intialized with i = 1.
It is because setTimeout() function is non-blocking. Therefore your setTimeout() function is running only first time.
Try this code...
var i = 1;
function func1(){
setTimeout(function(){
doSomething();
i++;
if(i < 10){
func1();
}
}, 3000);
}
func1();
doSomethings are scheduled to execute 3 seconds from when they are scheduled. Since they are scheduled right after one another with barely any time between them, they will execute 3 seconds after that, with barely any time between them. What did you expect to happen? If you wanted them to execute with 3 seconds between each of them, schedule them at 3000, 6000, 9000... or schedule the next one at the end of the current one, not in a loop outside of them.setTimeout. But all of thesetTimeoutcalls are executed in a loop, without delay between them.