Question

我正在尝试在自己的承诺内设定一个计时器。它们似乎都立即返回，而我尝试创建的计时器实际上并没有增加返回之间的时间所有功能立即返回，我需要将它们及时隔开，例如：功能1（等待4秒），功能2（等待4秒）等。

我尝试使用

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

这是我当前的示例，它调用需要在我的应用程序中一次执行一个的多个函数

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

您已经具有wait功能，您无需等待使用while，而是可以兑现这些承诺：

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"));
};

如果这些函数不返回promisese，请像这样链接它们：

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")));

Answer 2

您需要返回在一定时间后解决的承诺。将其返回到您的then内部，以便链中的后续then等待它。就您而言，您已经拥有wait函数：

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") }))

或者在异步函数中编写时：

await wait(6000)
this.props.setHighlightMode()

await wait(6000)
this.props.toggleMenu()

await wait(6000)
this.props.openNotes()

await wait(6000)
this.props.close()

await wait(6000)
this.props.setScholarMode()

await wait(6000)
this.props.DemosynonymsFunction("noun")

Answer 3

您可以为此使用递归，这是一个示例：

const functions = [this.props.toggleMenu, this.props.openNotes, this.prop.close, .....];
function process(arr, index) {
  if (index < arr.length) {
    arr[index]();
    setTimeout(process.bind(this, arr, ++index), 6000);
  }
}
process(functions, 0);

这将以6秒的间隔运行该功能，如果您想为不同的功能设置不同的暂停时间，则可以将超时时间作为参数添加到process函数中，或根据下一个函数进行设置在数组中。

或者，如果您要使用承诺，则可以执行以下操作：

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

const functions = [this.props.toggleMenu, this.props.openNotes, this.prop.close, .....];

functions.reduce(
  (p, fn) => p.then(fn).then(pause(6000)),
  Promise.resolve()
).then(() => {
  // All done.
});

为承诺设置计时器

3 个答案: