暂停for循环的迭代？

Question

我想在for循环的迭代之间添加一个1000ms的暂停。我在这里看到的所有解决方案（其中有很多）只是简单地将循环引入一个函数，然后从等待的setTimeout中调用该函数，然后以高速执行循环。我需要它暂停里面的循环。这是一个小提琴。

FIDDLE

var button = document.getElementsByTagName('span'); 
var searchText = 'Activate'; 
var resultDiv = document.getElementById('results'); 

for (var i = 0; i < button.length; i++) { 
    if (button[i].textContent == searchText) { 
    button[i].click(); 
    var div = document.createElement('div'); 
    div.innerHTML = 'Clicked'; 
    div.className = 'click'; 
    resultDiv.append(div); 
    // pause before iterating 
    } 
} 

Answer 1

这可以帮助你。

var button = document.getElementsByTagName("span"); 
 
var searchText = "Activate"; 
 
var resultDiv = document.getElementById('results'); 
 

 
for (var i = 0; i < button.length; i++) { 
 
    (function(j) { 
 
    setTimeout(function() { 
 
     if (button[j].textContent == searchText) { 
 
     button[j].click(); 
 
     var div = document.createElement("div"); 
 
     div.innerHTML = 'Clicked'; 
 
     div.className = 'click'; 
 
     resultDiv.append(div); 
 
     } 
 
    }, j * 1000); 
 
    })(i); 
 
};

.wrapper { 
 
    visibility: hidden; 
 
} 
 

 
.click { 
 
    padding: 5px 
 
}

<div class="wrapper"> 
 
    <span>Activate</span> 
 
    <span></span> 
 
    <span></span> 
 
    <span>Activate</span> 
 
    <span></span> 
 
    <span></span> 
 
    <span>Activate</span> 
 
    <span>Activate</span> 
 
    <span></span> 
 
    <span>Activate</span> 
 
    <span></span> 
 
    <span></span> 
 
    <span></span> 
 
    <span>Activate</span> 
 
    <span></span> 
 
    <span></span> 
 
    <span>Activate</span> 
 
    <span></span> 
 
    <span>Activate</span> 
 
    <span></span> 
 
    <span></span> 
 
    <span></span> 
 
    <span></span> 
 
    <span></span> 
 
    <span>Activate</span> 
 
    <span></span> 
 
    <span></span> 
 
</div> 
 
<div id="results"> 
 
</div>

Answer 2

可以使用的setInterval（），如：

setInterval(function() { 
      if (button[i].textContent == searchText) { 
    button[i].click(); 
    var div = document.createElement("div"); 
    div.innerHTML = 'Clicked'; 
    div.className = 'click'; 
    resultDiv.append(div); 
    // pause before iterating 
    } 
    if(i==button.length){ 
    clearInterval() 
    } 
    i++; 
}, 2000);