problem: setTimout functions in for loop evaluates at once [duplicate]












0
















This question already has an answer here:




  • How do I add a delay in a JavaScript loop?

    23 answers



  • Javascript, setTimeout loops?

    7 answers




I wanted to insert js code to console which makes 2 click() method on 2 elements but between these methods must be delay.
I considered solve this with setTimeout function and with for loop, and I creted a scratch with an array how it should be work, but all the setTimeout functions evaluetes at once, so there is not delay between them.
I do not use jQuery.






function func() {
var tr = document.createElement('TR');
var tableBody = document.getElementById("tbo");
tableBody.appendChild(tr);
var td = document.createElement('TD');
td.width = '75';
td.appendChild(document.createTextNode("Cell "));
tr.appendChild(td);
}

function myFunction() {
var myTableDiv = document.getElementById("myDynamicTable");
var table = document.createElement('TABLE');
table.border = '1';
var tableBody = document.createElement('TBODY');
tableBody.setAttribute('id', 'tbo')
table.appendChild(tableBody);

for (x = 0; x < 10; x++) {
myVar = setTimeout(func, 3000)
}
myTableDiv.appendChild(table);
}

<!DOCTYPE html>
<html>

<body>

<button onclick="myFunction()">Create the table</button>
<button onclick="clearTimeout(myVar)">Cancel the process</button>
<div id="myDynamicTable"></div>
</body>

</html>





The main purpose is creating a code like this:



element.click();
sleep()
element.click()









share|improve this question















marked as duplicate by Felix Kling javascript
Users with the  javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 20 '18 at 22:00


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.



















  • This is a great question to master. You may have to explain this very behavior some day as part of a job interview.

    – wlh
    Nov 20 '18 at 22:01
















0
















This question already has an answer here:




  • How do I add a delay in a JavaScript loop?

    23 answers



  • Javascript, setTimeout loops?

    7 answers




I wanted to insert js code to console which makes 2 click() method on 2 elements but between these methods must be delay.
I considered solve this with setTimeout function and with for loop, and I creted a scratch with an array how it should be work, but all the setTimeout functions evaluetes at once, so there is not delay between them.
I do not use jQuery.






function func() {
var tr = document.createElement('TR');
var tableBody = document.getElementById("tbo");
tableBody.appendChild(tr);
var td = document.createElement('TD');
td.width = '75';
td.appendChild(document.createTextNode("Cell "));
tr.appendChild(td);
}

function myFunction() {
var myTableDiv = document.getElementById("myDynamicTable");
var table = document.createElement('TABLE');
table.border = '1';
var tableBody = document.createElement('TBODY');
tableBody.setAttribute('id', 'tbo')
table.appendChild(tableBody);

for (x = 0; x < 10; x++) {
myVar = setTimeout(func, 3000)
}
myTableDiv.appendChild(table);
}

<!DOCTYPE html>
<html>

<body>

<button onclick="myFunction()">Create the table</button>
<button onclick="clearTimeout(myVar)">Cancel the process</button>
<div id="myDynamicTable"></div>
</body>

</html>





The main purpose is creating a code like this:



element.click();
sleep()
element.click()









share|improve this question















marked as duplicate by Felix Kling javascript
Users with the  javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 20 '18 at 22:00


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.



















  • This is a great question to master. You may have to explain this very behavior some day as part of a job interview.

    – wlh
    Nov 20 '18 at 22:01














0












0








0









This question already has an answer here:




  • How do I add a delay in a JavaScript loop?

    23 answers



  • Javascript, setTimeout loops?

    7 answers




I wanted to insert js code to console which makes 2 click() method on 2 elements but between these methods must be delay.
I considered solve this with setTimeout function and with for loop, and I creted a scratch with an array how it should be work, but all the setTimeout functions evaluetes at once, so there is not delay between them.
I do not use jQuery.






function func() {
var tr = document.createElement('TR');
var tableBody = document.getElementById("tbo");
tableBody.appendChild(tr);
var td = document.createElement('TD');
td.width = '75';
td.appendChild(document.createTextNode("Cell "));
tr.appendChild(td);
}

function myFunction() {
var myTableDiv = document.getElementById("myDynamicTable");
var table = document.createElement('TABLE');
table.border = '1';
var tableBody = document.createElement('TBODY');
tableBody.setAttribute('id', 'tbo')
table.appendChild(tableBody);

for (x = 0; x < 10; x++) {
myVar = setTimeout(func, 3000)
}
myTableDiv.appendChild(table);
}

<!DOCTYPE html>
<html>

<body>

<button onclick="myFunction()">Create the table</button>
<button onclick="clearTimeout(myVar)">Cancel the process</button>
<div id="myDynamicTable"></div>
</body>

</html>





The main purpose is creating a code like this:



element.click();
sleep()
element.click()









share|improve this question

















This question already has an answer here:




  • How do I add a delay in a JavaScript loop?

    23 answers



  • Javascript, setTimeout loops?

    7 answers




I wanted to insert js code to console which makes 2 click() method on 2 elements but between these methods must be delay.
I considered solve this with setTimeout function and with for loop, and I creted a scratch with an array how it should be work, but all the setTimeout functions evaluetes at once, so there is not delay between them.
I do not use jQuery.






function func() {
var tr = document.createElement('TR');
var tableBody = document.getElementById("tbo");
tableBody.appendChild(tr);
var td = document.createElement('TD');
td.width = '75';
td.appendChild(document.createTextNode("Cell "));
tr.appendChild(td);
}

function myFunction() {
var myTableDiv = document.getElementById("myDynamicTable");
var table = document.createElement('TABLE');
table.border = '1';
var tableBody = document.createElement('TBODY');
tableBody.setAttribute('id', 'tbo')
table.appendChild(tableBody);

for (x = 0; x < 10; x++) {
myVar = setTimeout(func, 3000)
}
myTableDiv.appendChild(table);
}

<!DOCTYPE html>
<html>

<body>

<button onclick="myFunction()">Create the table</button>
<button onclick="clearTimeout(myVar)">Cancel the process</button>
<div id="myDynamicTable"></div>
</body>

</html>





The main purpose is creating a code like this:



element.click();
sleep()
element.click()




This question already has an answer here:




  • How do I add a delay in a JavaScript loop?

    23 answers



  • Javascript, setTimeout loops?

    7 answers







function func() {
var tr = document.createElement('TR');
var tableBody = document.getElementById("tbo");
tableBody.appendChild(tr);
var td = document.createElement('TD');
td.width = '75';
td.appendChild(document.createTextNode("Cell "));
tr.appendChild(td);
}

function myFunction() {
var myTableDiv = document.getElementById("myDynamicTable");
var table = document.createElement('TABLE');
table.border = '1';
var tableBody = document.createElement('TBODY');
tableBody.setAttribute('id', 'tbo')
table.appendChild(tableBody);

for (x = 0; x < 10; x++) {
myVar = setTimeout(func, 3000)
}
myTableDiv.appendChild(table);
}

<!DOCTYPE html>
<html>

<body>

<button onclick="myFunction()">Create the table</button>
<button onclick="clearTimeout(myVar)">Cancel the process</button>
<div id="myDynamicTable"></div>
</body>

</html>





function func() {
var tr = document.createElement('TR');
var tableBody = document.getElementById("tbo");
tableBody.appendChild(tr);
var td = document.createElement('TD');
td.width = '75';
td.appendChild(document.createTextNode("Cell "));
tr.appendChild(td);
}

function myFunction() {
var myTableDiv = document.getElementById("myDynamicTable");
var table = document.createElement('TABLE');
table.border = '1';
var tableBody = document.createElement('TBODY');
tableBody.setAttribute('id', 'tbo')
table.appendChild(tableBody);

for (x = 0; x < 10; x++) {
myVar = setTimeout(func, 3000)
}
myTableDiv.appendChild(table);
}

<!DOCTYPE html>
<html>

<body>

<button onclick="myFunction()">Create the table</button>
<button onclick="clearTimeout(myVar)">Cancel the process</button>
<div id="myDynamicTable"></div>
</body>

</html>






javascript settimeout delay sleep






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 20 '18 at 22:01









abc123

13.3k43969




13.3k43969










asked Nov 20 '18 at 21:56









johndoeljohndoel

406




406




marked as duplicate by Felix Kling javascript
Users with the  javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 20 '18 at 22:00


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.









marked as duplicate by Felix Kling javascript
Users with the  javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 20 '18 at 22:00


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.















  • This is a great question to master. You may have to explain this very behavior some day as part of a job interview.

    – wlh
    Nov 20 '18 at 22:01



















  • This is a great question to master. You may have to explain this very behavior some day as part of a job interview.

    – wlh
    Nov 20 '18 at 22:01

















This is a great question to master. You may have to explain this very behavior some day as part of a job interview.

– wlh
Nov 20 '18 at 22:01





This is a great question to master. You may have to explain this very behavior some day as part of a job interview.

– wlh
Nov 20 '18 at 22:01












0






active

oldest

votes

















0






active

oldest

votes








0






active

oldest

votes









active

oldest

votes






active

oldest

votes

Popular posts from this blog

android studio warns about leanback feature tag usage required on manifest while using Unity exported app?

SQL update select statement

'app-layout' is not a known element: how to share Component with different Modules