为承诺设置计时器

Question

我正在尝试按照我的承诺设置一个计时器。它们似乎都立即 return 而我尝试创建的计时器实际上并没有增加 return 之间的时间所有函数 return 一次，我需要它们在时间上间隔开，例如：函数 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

您需要的是 return 一个在一段时间后解决的承诺。 Return 在您的 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 2

您已经有了一个 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"));
};

如果这些函数没有 return promise，将它们链接起来：

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 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函数中或者设置它基于数组中的下一个函数。

或者，如果你想使用 promises，你可以这样做：

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

为承诺设置计时器

setting a timer for promises

javascript

es6-promise