CODEWITHSUNDEEP
javascripttiming
aMJay
aMJay

Reputation: 2243

Javascript, setting timeout between events in one function

lets say I have a function in a loop that will display two different kinds of text interchangeably over and over.

Now what I want to achive is for the different text to be displayed with a delay, let's say 1 second. So it would print 1st text and after 1 second 2nd text and so on untill the loop is over. I was trying to use setTimeout and setInterval but I cannot get it to work.

var a = "hey ";
var b = "ho ";

function test(a,b){
  document.getElementById('id').innerHTML += a;
  document.getElementById('id').innerHTML += b;
 }

for(var i = 0; i < 10; i++){
 setInterval(test(a,b), 1000);
}
<div id="id">

</div>

Upvotes: 0

Views: 58

Answers (6)

Venugopal
Venugopal

Reputation: 1896

If you want the timeout between 'hey' and 'ho' also, you shouldn't be keeping both of them inside test, instead keep only one and change the param value.

var a = "hey ";
var b = "ho ";

function test(a){
  document.getElementById('id').innerHTML += a;
 }

for(var i = 0; i < 10; i++){
 (function(i) {
   setTimeout(function(){
    test(i % 2 === 0 ? a : b);
   }, i*1000);
 }(i))
}
<div id="id">

</div>

Upvotes: 1

Jamiec
Jamiec

Reputation: 136154

You need to change your code around a bit to introduce a delay between each.

The code below:

  • stores the possible values in the array
  • has a method which will display the ith element from the values
  • has a run method used to start the loop, and also recalled with a delay (1second) having incremented a counter

var values = ["hey","ho"];
var index = 0;

function display(i){
  document.getElementById('id').innerHTML = values[i];
}

function run(){
    display(index%values.length)
    if(++index<10){
      setTimeout(run,1000);
    }
}

run();
<div id="id">

</div>

Upvotes: 1

kapantzak
kapantzak

Reputation: 11750

function loop(i, limit) {  
  if (i < limit) {
    console.log('Text 1');
    setTimeout(function() {
      console.log('Text 2');      
      setTimeout(function() {
        loop(++i,limit);
      },1000);
    },1000);
  }
}

loop(0,3);

Upvotes: 1

trincot
trincot

Reputation: 350781

You can use an "asynchonous" loop for this, i.e. a function that calls itself after a time out. Then use the modulo operator to decide whether to show a or b:

var a = "hey ";
var b = "ho ";

function test(c){
    document.getElementById('id').innerHTML += c;
}

(function loop(i){
    if (i >= 10) return; // All done
    test(i%2 ? b : a); // choose which one to show
    setTimeout(loop.bind(null, i+1), 1000); // Repeat with delay and incremented i.
})(0); // Start the loop immediately with i=0
<div id="id">

</div>

Upvotes: 1

Zenoo
Zenoo

Reputation: 12880

You could use a setInterval and keep track of how many were done with a variable :

var count = 0; //Variable to keep track of the number of setInterval called
var text = ['text1','text2'];

var interval = setInterval(() => {
  if(count == 10) clearInterval(interval); //Stop the setInterval when you reach the 10th time
  document.getElementById('test').innerHTML = count % 2 == 0 ? text[0] : text[1];
  count++; //Increment your var
},1000);
<div id="test"></div>

Upvotes: 1

void
void

Reputation: 36703

  • You need to use setTimeout to introduce delay and not setInterval.

  • Timeout should be in incremental order so multiply it with i

  • test(a,b) should be in callback of the function so that setTimeout can execute it based on the delay. If you will directly write test(a,b) then it will get executed right then and there without any delay.

var a = "hey ";
var b = "ho ";

function test(a,b){
  document.getElementById('id').innerHTML += a;
  setTimeout(function(){
     document.getElementById('id').innerHTML += b;
  }, 500)
 }

for(var i = 0; i < 10; i++){
 setTimeout(function(){
  test(a,b);
 }, i*1000);
}
<div id="id">

</div>

UPDATE

Delay between document.getElementById('id')

Upvotes: 1

Related Questions