javascript - 经过一些研究，循环和 setTimeout 函数仍然不起作用

Question

我做了一些关于循环和 setTimeout 函数的研究，但它仍然没有像我希望的那样工作......

它同时打开所有链接没有每个打开的链接有 5 秒的延迟。

我希望它在打开每个链接后延迟 5 秒。

代码:

var links = document.querySelectorAll('a[class="mn-person-info__link ember-view"][id^="ember"]')
for (var i = 1; i <= links.length; i++) {
    (function(index) {
        setTimeout(function() { 
            window.open(links[index].href,'_blank'); 
        }, 5000);
    })(i);
}

Answer 1

使用 Promise链条和Array#reduce() ，你可以这样做:

var links = document.querySelectorAll('a[class="mn-person-info__link ember-view"][id^="ember"]');

Array.from(links).reduce((chain, { href }) => {
  return chain.then(() => new Promise(resolve => {
    window.open(href, '_blank');
    setTimeout(resolve, 5000);
  }));
}, Promise.resolve())

如果您不想做这么花哨的事情，并且可以一次设置所有超时，则可以使用 let 简化 for 循环而不是 var 和 IIFE :

var links = document.querySelectorAll('a[class="mn-person-info__link ember-view"][id^="ember"]');

for (let i = 0; i < links.length; i++) {
  setTimeout(function() { 
    window.open(links[i].href, '_blank'); 
  }, 5000 * i);
}

或者更简单，使用 for...of和 object destructuring :

var links = document.querySelectorAll('a[class="mn-person-info__link ember-view"][id^="ember"]');
var i = 0;

for (const { href } of links) {
  setTimeout(function() { 
    window.open(href, '_blank'); 
  }, 5000 * i++);
}