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()





javascript settimeout delay sleep







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()





javascript settimeout delay sleep







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()





javascript settimeout delay sleep







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




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

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

Image
0 My application was working fine until I decided to go with lazy loading: So, my shared component looks like this: import { Component, Renderer2 } from '@angular/core'; export interface FormModel { captcha?: string; } @Component({ selector: 'app-layout', templateUrl: './app-layout.component.html', styleUrls: ['./app-layout.css'] }) export class FullLayoutComponent { } app-layout.component.ts I am using this component in my Another component say school-home.component.html like this: <app-layout> </app-layout> and it was working fine until I created a Module school-home.module.ts like this: import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { SchoolhomeRoutingModule ...
Read more

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

Image
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box; } 0 This is a simple project showing cubes on Unity, exported to android project and imported on Android studio. On maifest file it showed following warning: Expecting <uses-feature android:name="android.software.leanback" android:required="false" /> tag I have no information about it. And also on default emptyview android project does not use/mention this feature. I know it is required by TV's and such but why its not added by default? Why is this? And Should I concern about it? android unity3d ...
Read more

WPF add header to Image with URL pettitions [duplicate]

Image
up vote 0 down vote favorite This question already has an answer here: Image source URI requiring authorization 3 answers Add header to all* HTTP requests on a machine 1 answer first of all sorry for my english. Recently I added some security in the backend of my project, and now I need to send a validation code(apiKey) inside the headers to retrieve the images. I have a problem with ALL images in my project that I had attached in my UI. For example, before I had: <Image Height="90" Source="{Binding Video.Thumbnail}"/> Now I need to change my code to create a CUSTOM petition add the apiKey in the header:...
Read more