if i want to print a numbers from 1 to 10 using setTimeout and delay = Math.random() * 1000. Answer would be number from 1 to 10 in random order because of async programming and event loop.

What i want is to print the number in increasing order with same delay above mentioned. This can be done via Promises or Async module. What i mean to say is it should only proceed once number 1 in printed then 2 so on.

Any help would be appreciated.

NOTE : Please dont give answers like adding time to a variable and using that variable as a delay.

if i want to print a numbers from 1 to 10 using setTimeout and delay = Math.random() * 1000. Answer would be number from 1 to 10 in random order because of async programming and event loop.

What i want is to print the number in increasing order with same delay above mentioned. This can be done via Promises or Async module. What i mean to say is it should only proceed once number 1 in printed then 2 so on.

Any help would be appreciated.

NOTE : Please dont give answers like adding time to a variable and using that variable as a delay.

• javascript
• asynchronous
• settimeout
• es6-promise

• So it seems you want to program synchronous behaviour with asynchronous techniques? You should take a look at promises and then. – Rob Commented Jul 10, 2017 at 10:49
• "i want is to print the number in increasing order with same delay above" So is delay the same every time but randomly generated, or is the delay random every time ? – Luke Commented Jul 10, 2017 at 10:52
• @Luke, delay is random everytime – Abhishek Nayyar Commented Jul 12, 2017 at 8:01
• OK @AbhishekNayyar - I'd throw up an alternative but unless you can explain what's wrong with any of the answers already - it's probably not worth it. – Luke Commented Jul 12, 2017 at 11:21
• all answers are working fine and solutions provided here are both sync/promises based as well as vanila javascript based. So thank to all the contributors... – Abhishek Nayyar Commented Jul 13, 2017 at 11:13

4 Answers 4

You could do this like this, using Promises and async/await

// returns a promise that resolves after the specified number of ms
function delay(ms) {
    return new Promise(resolve => {
        setTimeout(resolve, ms);
    });
}

// function that will print the numbers in correct order, with delays
async function print(num) {
    for (let i = 1; i <= num; i++) {

        await delay(Math.random() * 1000); // wait 

        console.log(i); // print number
    }
}

print(10); // actually execute function

The function that actually prints the numbers is an async function, using a delay based on a promise that resolves after the specified number of milliseconds.

es6 fromat

const delay = (m) => new Promise(resolve => setTimeout(resolve, m));

const print = async (num) => { 
     for (let i = 1; i <= num; i++) {
         await delay(Math.random() * 1000);
         console.log(i);
     }  
};
 
print(10);

I think you want a semi recursive setTimeout:

(function print(value){
   console.log(value);
   if(value<10) setTimeout(print,Math.random()*1000,value+1);
})(1);

You need to use setInterval and not setTimeout like this

var count = 1;

var printSequence;
function myFunction() { 
    //using setInterval that is referenced by a variable
    printSequence = setInterval(print, Math.random()*1000);
    
}

function print(){
      console.log(count);
      count++;;
      clearInterval(printSequence);
      
      if(count <= 10){
         myFunction();
      }      
}

<button onclick="myFunction()">Try it</button>

No need to add extra logic and code here.