ES6迭代器和settimeout

Question

我正在尝试迭代一个请求列表，但在处理下一个请求之前会有延迟。我想用ES6迭代器来做这件事，如下所示，但它不起作用……(控制台输出为我冻结，不确定原因)

requests = [1,2,3,4,5,6];
delay    = 2000;

const iterateCollection = requests => {
return new Promise((resolve, reject) => {

    function *iterateRequests() {
        for (const req of requests) {
            yield req;
        }
    }

    const requestIterator = iterateRequests();
    let   currentRequest  = requestIterator.next();

    while(!currentRequest.done) {
        setTimeout(() => { 
            console.log(currentRequest);
            currentRequest = requestIterator.next();
        }, delay);
    }

    resolve();
}); 
};

iterateCollection(requests)
    .then(() => console.log('done!'));

看起来setTimeOut并不受欢迎。如果我从代码中删除它(删除延迟)，我就会得到预期的迭代，而没有延迟，如下所示。

requests = [1,2,3,4,5,6];
delay    = 2000;

const iterateCollection = requests => {
  return new Promise((resolve, reject) => {

    function *iterateRequests() {
        for (const req of requests) {
            yield req;
        }
    }

    const requestIterator = iterateRequests();
    let   currentRequest  = requestIterator.next();

    while(!currentRequest.done) {
        console.log(currentRequest);
        currentRequest = requestIterator.next();
    }

    resolve();
  });   
};

iterateCollection(requests)
    .then(() => console.log('done!'));

// OUTPUT
//{value: 1, done: false}
//VM85:26 {value: 2, done: false}
//VM85:26 {value: 3, done: false}
//VM85:26 {value: 4, done: false}
//VM85:26 {value: 5, done: false}
//VM85:26 {value: 6, done: false}
//VM85:35 done!

Answer 1

异步事物在所谓的事件队列中排队，直到js引擎完成其当前任务，然后它从事件队列中取得下一个任务。在您的示例中，当前任务如下：

while(!currentRequest.done) {

因为您的数组有一个元素，所以迭代器没有完成，循环将永远运行。所有超时都会卡在事件队列中，处理程序将永远不会执行。您可以只使用async，这样您就可以等待循环，直到超时结束：

 const timer = ms => new Promise(res => setTimeout(res, ms));

async function iterateCollection(collection){
  for(const el of collection){
    await timer(1000);
     //...
  }
}