javascript - 我如何遍历 3 个 setInterval 函数，但将它们链接为 promises，以便解决并继续？

Question

假设 first()、second() 和 third() 函数有效，我如何将它们异步链接在一起循环以便第一个解析，然后第二个在第一个解析后访问 DOM，等等。

所以我可以点击类似的 DOM 项并一遍又一遍地执行 3 个操作？

// first() pops up a list of buttons I can click
var first = setInterval(function() {
  var expand = document.querySelector('a');
  expand.click();
}, 1000);

// second() chooses an item and clicks it
var second = setInterval(function() {
  var something = document.querySelector('a');
  something.click();
}, 1000);

// third then chooses the confirm button
var third = setInterval(function() {
  var area = document.querySelector('.class');
  var confirm = document.querySelector('.confirm');
  confirm.click();
}, 1000);


var times = 100;
var ran = 0;

while (ran < times) {
  return new Promise(function(res, rej) {
    first()
  }).then(function() {
    second()
  }).then(function() {
    third();
  }).then(function() {
    fourth();
  });

  ran++;
  console.log(ran);
}

Answer 1

我认为解决您问题的最简单方法是将 setTimeout 包装在 Promise 中，然后使用 async/等待。这样您就可以使用您已经设置好的相同控制流。

您应该使用 setTimeout 而不是 setInterval。 setInterval 按设定的时间间隔定期运行，但您的 while 循环已经多次运行您的代码，因此您应该使用 setTimeout 而不是只运行一次回调。

为了让事情更简单，我会将 setTimeout 包装在 Promise 中，这样您就可以使用 async 和 等待。

async 是您放置在函数上的修饰符，它允许您使用关键字 await。 await 所做的是在运行下一段代码之前解开 promise 并等待它们解决。它允许您使用简单的同步控制流，即使代码实际上是异步的。

我所做的是创建一个 async 函数 main(不过你可以随意调用它)它是 await 包装的 >setTimeout 函数。现在该函数将等待时间结束，然后运行下一段代码。

希望对您有所帮助!

a Note on browser compatibility: Async and await is from the lastest javascript standard so it won't work on IE. You can use babel to converter newer javascript to older javascript if you need to.

function time(milliseconds) {
  return new Promise(resolve => setTimeout(() => resolve(), milliseconds));
}

function first () {
  // const expand = document.querySelector('a');
  // expand.click();
  console.log('first ran');
}
function second() {
  // const something = document.querySelector('a');
  // something.click();
  console.log('second ran');
}
function third() {
  // const area = document.querySelector('.class');
  // const confirm = document.querySelector('.confirm');
  // confirm.click();
  console.log('third ran');
}

async function main() {
  const times = 100;
  let ran = 0;

  while (ran < times) {
    first();
    await time(1000);
    second();
    await time(1000);
    third();
    await time(1000);
    ran++;
    console.log(ran);
  }
}

main();

---

来自您的评论:

Thanks! Also curious, the best possible solution for me would be to be able to step through these using yield so I can call main().next(). Do you know how to structure that as a generator with the same time promise? Would love the help on that

我认为这不是您想要的，但它可以满足您的要求。也许我得再考虑一下……

无论如何，run 现在是一个返回 promise 的函数，在 make 函数中，它 yield 是 promise run 返回。所以现在在另一个异步函数中你可以await它们的value。

同样，我认为这不是你想要的，但如果你阐明你的意图，我可以给你另一个建议。

function time(milliseconds) {
  return new Promise(resolve => setTimeout(() => resolve(), milliseconds));
}

function first () {
  // const expand = document.querySelector('a');
  // expand.click();
  console.log('first ran');
}
function second() {
  // const something = document.querySelector('a');
  // something.click();
  console.log('second ran');
}
function third() {
  // const area = document.querySelector('.class');
  // const confirm = document.querySelector('.confirm');
  // confirm.click();
  console.log('third ran');
}

async function run() {
  first();
  await time(1000);
  second();
  await time(1000);
  third();
  await time(1000);
}

function* make() {
  const times = 100;
  let ran = 0;

  while (ran < times) {
    yield run();
    ran++;
    console.log(ran);
  }
}

async function main() {
  const iterator = make();
  await iterator.next().value;
  await iterator.next().value;
  await iterator.next().value;
  await iterator.next().value;
}

main();