按顺序打印数字，元素出现的延迟取决于元素的序号

Question

我想打印一个数字序列；它应该始终以 1 开头，并在延迟 1 秒（1000 毫秒）后显示。列表中的下一个数字 2 应该在延迟 2 秒后打印，在前一个数字之后打印，即 1 已打印，依此类推，直到达到给定的限制。已按顺序完成。

1 应该在 1 秒时打印

2 应该在 3 秒时打印

3 应该在 6 秒时打印等等..

我想到了两种方法，使用 Promises 或使用 Generator function/async-await

我的问题是关于第一种方法，即使用 Promise。

一个。使用 setTimeout 时，我没有得到正确的顺序

b。而使用 block/delay 函数给出了正确的结果。

a. When using setTimeout, I am not getting the correct order

与此行为相矛盾的原因：每个任务传递给 browser/Node.js 的 Timer 功能，等待超时完成，一旦完成，将任务推送到调用堆栈。

Promise.then 保证在占用下一个 function/callback 形成 onFullfillment 数组之前解析前一个 thenable。

谁能给我一个正确的直觉或帮助我正确的理解。

(function printAsyncInOrder(limit) {
  let [, ...list] = [...Array(limit + 1).keys()];

  list.reduce(chainedSequence, Promise.resolve());

  function chainedSequence(chain, currentOrder, index) {
    return chain.then(() => {
      let i = index;
      let current = currentOrder;
      //  setTimeout(() => console.log(`Hi ${index} ${new Date()}`), i * 1000)

      blocker(current * 1000);
    });
  }

  function blocker(time) {
    let timeNow = new Date();
    while (new Date() - timeNow < time) {}
    console.log(`hi ${time} ${new Date()}`);
  }
})(10);

使用设置超时：

Hi 2 Sun Nov 10 2019 11:37:44
Hi 3 Sun Nov 10 2019 11:37:45
Hi 4 Sun Nov 10 2019 11:37:46
Hi 5 Sun Nov 10 2019 11:37:47
Hi 6 Sun Nov 10 2019 11:37:48
Hi 7 Sun Nov 10 2019 11:37:49
Hi 8 Sun Nov 10 2019 11:37:50
Hi 9 Sun Nov 10 2019 11:37:51
Hi 10 Sun Nov 10 2019 11:37:52

使用blocker/delay函数

hi 2000 Sun Nov 10 2019 11:38:29
hi 3000 Sun Nov 10 2019 11:38:32
hi 4000 Sun Nov 10 2019 11:38:36
hi 5000 Sun Nov 10 2019 11:38:41
hi 6000 Sun Nov 10 2019 11:38:47
hi 7000 Sun Nov 10 2019 11:38:54
hi 8000 Sun Nov 10 2019 11:39:02
hi 9000 Sun Nov 10 2019 11:39:11
hi 10000 Sun Nov 10 2019 11:39:21

Answer 1

你需要 return chain.then(() => { 中的 Promise，它会在超时到期后解决

像这样

(function printAsyncInOrder(limit) {
  let [, ...list] = [...Array(limit + 1).keys()];

  list.reduce(chainedSequence, Promise.resolve());

  function chainedSequence(chain, currentOrder, index) {
    return chain.then(() => {
      let current = currentOrder;
      return new Promise(resolve => setTimeout(() => {
        console.log(`Hi ${index} ${new Date()}`);
        resolve();
      }, 1000 * index));
    });
  }
})(10);

按顺序打印数字，元素出现的延迟取决于元素的序号

Print numbers in order, delay with which the element appears is dependent on the sequence number of the element

javascript

asynchronous

settimeout

es6-promise