for循环之间的Javascript超时？

Question

因此，对于使用javascript提供的setTimeout方法的最佳方法可能有些误解，但我很难以一种有意义的方式实现它。

基本上我有一个数字介于1-4之间的数组，每个数字都对应一个放松的按钮。

for(let i = 0;i < arr.length;i++){
        view.renderPane(arr[i]) //All this does is set the .css

view.renderPane非常简单:(我有一个单独的函数可以清除（将不透明度设置回.5），但如果可能的话，我想把它放在这里。

  renderPane(pane){
    $("."+pane).css("opacity", "1");
    console.log("Activating Pane "+ pane)
  }

所以我尝试设置一个超时，以为我可以在超时内调用renderPane，但它所做的只是设置了一堆超时，基本上在X秒（或毫秒）后触发。有没有办法在这个for循环中每隔1秒调用renderPane(pane)函数（设置一个延迟）？或者我需要设置别的东西吗？

Answer 1

无需使用循环，只需创建一个连续使用setTimeout进行自我调度的函数，直到完成为止 - 在这种情况下，它会在每个调用中从数组中删除一个项目，并在数组为空：

(function callee() {
    view.renderPane(arr.shift());
    if (arr.length)
        setTimeout(callee, 1000);
})();

示例：https://jsfiddle.net/2fwht35d/

还有很多其他方法可以实现这种行为，但这应该会给你一个很好的起点。