JS函数内部循环动画(Loop animation inside the JS function)

JS函数内部循环动画(Loop animation inside the JS function)

有一个函数包含一个本地数组和一个以某种方式改变那些数组的循环。 函数也会返回一个数组。 示例如下：

function myFunc(expr) { var array1 = [], array2 = []; for (var i = 0; i < expr.length; ++i) { // ... } return array2; };

我需要在每个循环步骤后在画布上画一个带DELAY的数组。

我的第一个想法是在循环结束时使用某种“睡眠”功能，但Google告诉我JS没有这种类型的功能。 我不完全理解“setInterval”函数是如何工作的，但据我所知，即使我的外部函数（myFunc）将停止并且由于此外部函数将不会返回“array2”，这将执行。

There is a function that contains a local arrays and a loop which somehow alters those arrays. Also function returns one of arrays. Example below:

function myFunc(expr) { var array1 = [], array2 = []; for (var i = 0; i < expr.length; ++i) { // ... } return array2; };

I need to draw on canvas an array with a DELAY after each loop step.

My first thought was to use a some sort of "sleep" function in the end of the loop, but Google said me that JS has not such type of functi. I not fully understand how works the "setInterval" function but as far as I know this will execute even when my external function (myFunc) will stopped and due to this external function will not returns "array2".

最满意答案

如果我理解正确，你希望循环“暂停”，同时你执行一些功能，在循环内可以使用数据，然后执行一个功能。 当你说“为每个循环步骤”时，我假设它是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

请注意，超时不准确，并且在执行功能之前可能存在时间偏差。

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

我希望这有帮助！

If I understand correctly, you want the loop to "pause" while you perform some function with data avilable inside the loop and then perform a function. When you say "for each loop step" I assume it's for each step in the for loop.

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; };

As far as I know, you won't be able to achieve this exactly, however, if you have the data available you can "fake" the behaviour you want.

See this jsfiddle where I created an example.

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; };

Your (estimated) timeline will then be as follows, from when the for loop is started.

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

ote that timeout is not precise, and there can be deviati in the time before execution of the function.

Beware of scoping issues if you modify the variables you use inside the function, inside the loop.

I hope this helps!