for循环中的JavaScript setTimeout函数只发生一次

Question

我有一个forTime循环，里面有一个setTimeout函数用于延迟循环的每次迭代。虽然循环内的其余代码正确迭代，但setTimeout函数只能工作一次，就好像for循环在里面一样，而不是相反。这里是我的代码：

for (x = 0; x <= roll; x ++) { 
     setTimeout(function() { 
      space = $(".player." + turn).parents("td").attr("id"); 
      space = parseInt(space); 
      player = $(".player." + turn); 
      $(".player." + turn).remove(); 
      nextSpace = space + 1; 
      $("#" + nextSpace).append(player); 
     }, 500); 
    } 

任何想法？

Answer 1

试试这个：

setTimeout(function() { 
    // your code 
}, 500 * x); 

Answer 2

这不是如何setTimeout的作品。这不是同步延迟。如果要延迟循环的每次迭代，则需要通过递归调用内部函数来完成此操作。

function inner_function(x, max_x) { 
    space = $(".player." + turn).parents("td").attr("id"); 
    space = parseInt(space); 
    player = $(".player." + turn); 
    $(".player." + turn).remove(); 
    nextSpace = space + 1; 
    $("#" + nextSpace).append(player); 

    setTimeout(inner_function, 500, x+1, max_x); 
} 

inner_function(0, 500);