javascript - JS函数内循环动画

Question

有一个函数包含一个局部数组和一个循环这会以某种方式改变这些数组。函数也返回数组之一。下面的例子:

function myFunc(expr) {
    var array1 = [],
        array2 = [];

    for (var i = 0; i < expr.length; ++i) {
    // ...
    }

    return array2;
};

我需要在每个循环步骤之后在 Canvas 上绘制一个带有延迟的数组。

我的第一个想法是在循环末尾使用某种“ sleep ”函数，但谷歌告诉我JS没有这种类型的函数。我不完全理解“setInterval”函数是如何工作的，但据我所知，即使我的外部函数(myFunc)停止，它也会执行，并且由于这个外部函数不会返回“array2”。

Answer 1

如果我理解正确，您希望循环在使用循环内可用的数据执行某些函数时“暂停”，然后执行函数。当您说“对于每个循环步骤”时，我假设它是针对 for 循环中的每个步骤。

function myFunc(expr) {
    var array1 = [],
        array2 = [];

    for (var i = 0; i < expr.length; ++i) {
       // ...
       // Perform something here after a certain time, while the loop waits.
    }

    return array2;
};

据我所知，您将无法准确地实现这一目标，但是，如果您有可用的数据，您可以“伪造”您想要的行为。

查看此jsfiddle我在其中创建了一个示例。

function myFunc(expr) {
    var array1 = [],
        array2 = [];

    for (var i = 0; i < expr.length; ++i) {
       // ...
       setTimeout(function(){
           // Do whatever you want to do.
       }, i*500); // i = 0 is instantly, i = 1 is after 0.5s, i=2 is 1s, and so on...
    }

    return array2;
};

从 for 循环开始时起，您的(估计)时间线将如下所示。

0s   -> function in timeout when i = 0 is called
0.5s -> function in timeout when i = 1 is called
1.0s -> function in timeout when i = 2 is called

请注意，超时并不精确，函数执行前的时间可能存在偏差。

如果修改函数内、循环内使用的变量，请注意范围问题。

希望这会有所帮助!