SetTimeout in javaScript doesn't work correctly
I know there is an answer for this, but !! All answers that only cover one setTimeout in a loop, this question matters to me How to add a delay in a JavaScript loop? But in my scenario, I have two setTimeout in Script, how can this be properly implemented with timing in mind! The program works correctly, but the timing I want is wrong.
function clickDate(i)
{
setTimeout((function(){
alert("4");
})(),2000);
}
function clickButton(i)
{
setTimeout((function(){
alert("5");
})(),4000);
}
function doEverything(i)
{
clickDate(i);
clickButton(i);
}
for(var i = 0; i < 4; i++)
{
doEverything(i);
}
source to share
You call the function immediately when you pass it to setTImeout. Remove extra brackets.
function clickDate(i)
{
setTimeout(function(){
alert("4");
},2000);
}
function clickButton(i)
{
setTimeout(function(){
alert("5");
},4000);
}
function doEverything(i)
{
clickDate(i);
clickButton(i);
}
for(var i = 0; i < 4; i++)
{
doEverything(i);
}
EDIT
It's a bit confusing what exactly you want your code to see when you step i
into your function. I assume you want to use it in some way. You are currently creating timeouts that will run immediately. You will need to jiggle the delay times if you want them to run sequentially. The code below writes "4" every 2 seconds and "5" every "4" seconds, multiplying the delay time by i+1
.
// Currently this code displays a 4 every 2 seconds and a 5 every 4 seconds
function clickDate(i)
{
setTimeout(function(){
console.log("4");
},2000 * (i+1));
}
function clickButton(i)
{
setTimeout(function(){
console.log("5");
},4000 * (i+1));
}
function doEverything(i)
{
clickDate(i);
clickButton(i);
}
for(var i = 0; i < 4; i++)
{
doEverything(i);
}
source to share
Hi I guess you haven't read the javascript documentation. It is asynchronous and will not wait for an event and will continue the process. I'll give the answer, but I highly recommend reading about Javascript, it's good for you only here, you will get a sync problem because you will be calling both functions at the same time. Let me give you an example.
function clickDate(i,callback)
{
setTimeout(function(){
alert("4");
callback();//this will call anonymous function in doEverything
},2000);
}
function clickButton(i)
{
setTimeout(function(){
alert("5");
},4000);
}
function doEverything(i)
{
console.log("In loop index is " , i);
clickDate(i,function(){
clickButton(i);
});
//look closely here I have passed the function in changeData and will call that funtion from clickDate
console.log("In loop terminating index is " , i);
}
for(var i = 0; i < 4; i++)
{
doEverything(i);
}
So, here the console log will let you understand the asynchronous functionality. You will see that for the loop completes while it continues it runs and completes easily in 2 seconds, so before the first warning for the loop, it completes the iteration.
Hope this helps.
source to share