setting a timer for promises

Question

I am trying to set a timer within my promises. They all seem to return instantly and the timer I attempt to create does not actually increase the time between returns all the functions return at once, I need them to be spaced apart in time say for example: function 1 (wait 4 seconds) function 2 (wait 4 seconds) etc..

I have tried using

.then(()=>{
    let counter=0
    while(counter < 6000){
      counter+=1
    }
     this.props.toggleMenu()
  })

here is my current example it calls multiple functions that need to execute one at a time in my application

rundemo=()=>{
  //function is designed to run all the essential functions in the app one after another

  const wait = time => new Promise((resolve) => setTimeout(resolve, time));

  var docvalue= document.getElementById('regex-example').value
  var selection = this.range(0,20,docvalue)//get selected chars in element
  var selectedText = selection.toString(); //sends the elements to a string


  wait(6000).then(() =>   this.props.setHighlightMode() )
  .then(()=>{
    let counter=0
    while(counter < 6000){
      counter+=1
    }
     this.props.toggleMenu()
  })
  .then(()=>{
    let counter=0
    while(counter < 6000){
      counter+=1
    }
    this.props.openNotes()
  })
  .then(()=>{
    let counter=0
    while(counter < 6000){
      counter+=1
    }
    this.props.close()
  })
  .then(()=>{
    let counter=0
    while(counter < 6000){
      counter+=1
    }
    this.props.setScholarMode()
  })
  .then(()=>{
    let counter=0
    while(counter < 6000){
      counter+=1
    }
    this.props.DemosynonymsFunction("noun")
  })
}

Answer 1

You already have a wait function, instead of waiting using while, you could chin those promises :

rundemo = () => {
  //function is designed to run all the essential functions in the app one after another

  const wait = time => new Promise(resolve => setTimeout(resolve, time));

  var docvalue = document.getElementById("regex-example").value;
  var selection = this.range(0, 20, docvalue); //get selected chars in element
  var selectedText = selection.toString(); //sends the elements to a string

  wait(6000)
    .then(() => this.props.setHighlightMode())
    .then(wait(6000))
    .then(() => this.props.toggleMenu())
    .then(wait(6000))
    .then(() => this.props.openNotes())
    .then(wait(6000))
    .then(() => this.props.close())
    .then(wait(6000))
    .then(() => this.props.setScholarMode())
    .then(wait(6000))
    .then(() => this.props.DemosynonymsFunction("noun"));
};

If those functions don't return promisese, chain them like :

wait(6000)
    .then(() => this.props.setHighlightMode())
    .then(() => wait(6000).then(() => this.props.toggleMenu()))
    .then(() => wait(6000).then(() => this.props.openNotes()))
    .then(() => wait(6000).then(() => this.props.close()))
    .then(() => wait(6000).then(() => this.props.setScholarMode()))
    .then(() => wait(6000).then(() => this.props.DemosynonymsFunction("noun")));