javascript - for循环内的JavaScript setTimeout函数只发生一次

Question

我有一个 for 循环，其中有一个 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);