for循环之间的Javascript超时?

时间:2017-05-05 03:26:38

标签: javascript jquery

因此,对于使用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)函数(设置一个延迟)?或者我需要设置别的东西吗?

1 个答案:

答案 0 :(得分:2)

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

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

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

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