Javascript 经过一些研究，loop和setTimeout函数仍然不起作用

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

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

---

我想它打开每一个链接后，每5秒延迟每一个

代码：

var links=document.querySelectorAll（'a[class=“mn-person-info\uu link-ember-view”][id^=“ember”]”）
对于（var i=1；i这是因为所有超时都是立即设置的，几乎是一次设置的。因此，超时的结束几乎是在同一时间进行的。请尝试以下操作：

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);
  })(i);
}

var links=document.querySelectorAll（'a[class=“mn-person-info\uu link-ember-view”][id^=“ember”]”）
对于（var i=1；i这是因为所有超时都是立即设置的，几乎是一次设置的。因此，超时的结束几乎是在同一时间进行的。请尝试以下操作：

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);
  })(i);
}

var links=document.querySelectorAll（'a[class=“mn-person-info\uu link-ember-view”][id^=“ember”]”）
for（var i=1；i
setTimeout
是异步的。我将使用以下方法解决此指定问题：

Array.from(links).reduce((a,e)=>{
    setTimeout(function() { window .open(e.href,'_blank');}, a);
    return a + 5000;
} ,5000);

setTimeout
是异步的。我将使用以下方法解决此指定问题：

Array.from(links).reduce((a,e)=>{
    setTimeout(function() { window .open(e.href,'_blank');}, a);
    return a + 5000;
} ,5000);

使用链和，可以执行以下操作：

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())

如果您不想做这么花哨的事情，并且可以一次设置所有超时，您可以使用而不是
var
和一个：

使用链和，可以执行以下操作：

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())

如果您不想做这么花哨的事情，并且可以一次设置所有超时，您可以使用而不是
var
和一个：

简易方法：

links.forEach(function(i, link) {
    setTimeout(function() { 
        window.open(link.href,'_blank'); 
    }, 5000 * i);
});

只需等待i*5秒，其中i是链接的索引
简易方式：

links.forEach(function(i, link) {
    setTimeout(function() { 
        window.open(link.href,'_blank'); 
    }, 5000 * i);
});

只要等待i*5秒，其中我是上面代码中链接的索引，我假设您希望每隔5秒打开一次链接，因此这里是对代码所做的改进和建议

// use JS hoisting for variable declarations
var 
    // Timer to store the next timer function reference
    timer,

    // The delay between each function call
    delay = 5000,

    // Set the desired selector 
    selectors = 'a[class="mn-person-info__link ember-view"][id^="ember"]',

    // Get the list of the required selectors.
    links = document.querySelectorAll(selectors);

// Create a function which will be called every X seconds
function openLink( index ){
    
    // validate that the index is not out of bound
    if (index === links.length){ 
        return;    
        }
    
    // get the current link and open new window with the link url
    window.open(links[index].href,'_blank'); 
 
    // Set the next timer to open the next window
    timer = setTimeout( openLink, delay, ++index);  
}

// Call the function for the first time with index = 0
openLink( 0 );


这个代码是做什么的？
第一部分是在脚本中使用的变量的声明。声明变量id的首选方法是

吊装
提升是一种JavaScript机制，其中变量和函数声明在代码执行之前移动到其作用域的顶部

定时器
如果您希望按顺序打开链接，则应将它们放入一个函数中，该函数将逐个调用它们，而不是使用
for循环
。
for循环
将所有链接放入
调用堆栈/事件循环
，并且所有链接都将在5000毫秒后执行，因为这是设置的超时因此，它将从现在起将所有这些代码的执行时间安排为5000毫秒

我建议你观看菲利普·罗伯茨的精彩演讲

如果希望使用
clearTimeout（timer）

总结
由于您有for循环，它将在所有链接上循环。
setTimeout
将为所有链接设置5秒后的计划执行时间。

这里的技巧是在当前计时器打开后设置下一个计时器。这就是为什么sertTimeout是在函数本身中定义的

setTimeout
获取第三个参数，该参数是调用函数时传递给函数的参数。
根据上面的代码，我假设您希望每5秒打开一次链接，因此下面是对代码的改进和建议

// use JS hoisting for variable declarations
var 
    // Timer to store the next timer function reference
    timer,

    // The delay between each function call
    delay = 5000,

    // Set the desired selector 
    selectors = 'a[class="mn-person-info__link ember-view"][id^="ember"]',

    // Get the list of the required selectors.
    links = document.querySelectorAll(selectors);

// Create a function which will be called every X seconds
function openLink( index ){
    
    // validate that the index is not out of bound
    if (index === links.length){ 
        return;    
        }
    
    // get the current link and open new window with the link url
    window.open(links[index].href,'_blank'); 
 
    // Set the next timer to open the next window
    timer = setTimeout( openLink, delay, ++index);  
}

// Call the function for the first time with index = 0
openLink( 0 );


这个代码是做什么的？
第一部分是在脚本中使用的变量的声明。声明变量id的首选方法是

吊装
提升是一种JavaScript机制，其中变量和函数声明在代码执行之前移动到其作用域的顶部

定时器
如果您希望按顺序打开链接，则应将它们放入一个函数中，该函数将逐个调用它们，而不是使用
for循环
。
for循环
将所有链接放入
调用堆栈/事件循环
，并且所有链接都将在5000毫秒后执行，因为这是设置的超时因此，它将从现在起将所有这些代码的执行时间安排为5000毫秒

我建议你观看菲利普·罗伯茨的精彩演讲

如果希望使用
clearTimeout（timer）

总结
由于您有for循环，它将在所有链接上循环。
setTimeout
将为所有链接设置5秒后的计划执行时间。

这里的技巧是在当前计时器打开后设置下一个计时器。这就是为什么sertTimeout是在函数本身中定义的

setTimeout
获取第三个参数，该参数是调用函数时传递给函数的参数。
使
setTimeout
超出for循环，类似这样的内容？函数doSetTimeout（i）{setTimeout（function（）{alert（i）；}，100）；}for（var i=1；i）“它在同一时间打开所有链接，没有5秒的延迟”你是说它们都立即打开？还是说它等待5秒，然后它们同时打开？（我怀疑是后者，这就是我希望代码能做的）@MaorBahar我不能清楚地理解这个问题，你给了5000毫秒的超时时间，你能清楚地解释一下你想要做什么吗？我希望在每次超时后以5秒的延迟打开每个链接，使
settimeout
跳出for循环