我怎样才能得到这个代码，使序列明显

How can I get this code to make the sequence obvious?

本文关键字：代码      更新时间：2023-09-26

下面的代码允许我拥有一个包含一组数字的数组，例如"thearray=[2,8,9]"，并循环遍历该数组，对于数组中的每个数字项，例如"2,8,9"，代码调用函数的次数等于数组中当前数字项的次数。因此，如果当前数字项为2，则调用该函数两次。

在这组调用之后，有一个暂停，然后函数再次被调用，次数等于数组中的当前数字，等等。换句话说，当数组被循环时，如果当前的数字项是2，名为"thefunction"的函数将被调用两次，然后有一个暂停，然后函数"thefunction"再次被调用的次数等于数组中的下一个数字。

在我的例子中，"thefunction"只是显示一个警告框消息两次，然后是暂停，然后是8次，然后是9次，然后是暂停等等。当然，对于警报框消息，我按顺序获得消息，因为我必须在看到下一个警报消息之前选择ok。问题是，我无法让"函数"的调用出现顺序，就像在"函数"中执行的代码显示警报框一样，当其他代码(例如将带有数据的li项附加到ul中)在该函数中。

就好像2次调用同时进行，那么8次调用同时进行，等等。尽管事实可能并非如此，但它发生得如此之快，似乎如此。我想放慢速度。因此，如果"thefunction"中的代码是将信息附加到li元素的代码，而不仅仅是看到在调用序列不明显的地方快速添加的信息，我希望有一个延迟，以便当li元素被附加时，序列更明显，而不是在难以看到序列的地方快速。

代码如下:

function runArray(arr, fn) {
// initialize array index - can't use for loop here with async
var index = 0;
function next() {
   var cnt = +arr[index];
   for (var i = 0; i < cnt; i++) {
       fn(index, cnt);
   }
   // increment array index and see if there's more to do
   ++index;
   if (index < arr.length) {
       setTimeout(next, 400);
   }
}
// start the whole process if the array isn't empty
if (arr.length) {
   next();
}
 }
runArray(thearray, shakeit);

，下面是一个jsfiddle，它演示了一个快速添加信息的日志。我想放慢速度，这样信息添加的速度就足够慢，这样就可以明显地看出这是一个序列。

http://jsfiddle.net/jfriend00/Loycmb3b/

实际上您要做的是在for循环的执行之间插入一个延迟。在JavaScript中引入延迟的唯一相同的方法是使用setTimeout和setInterval，所以这就是你必须使用的。

下一个想法是，因为每个循环迭代是作为对setTimeout和朋友的回调来实现的，在每个循环完成后移动到下一个数组元素的逻辑必然是其中的一部分——你不能在循环完成之前移动到下一个元素。

但是移动到下一个元素的逻辑已经在next中，并且我们已经确定next应该设置回调。所以next会调度回调，而回调也会调度next——没有别的办法了。

因此:

function runArray(arr, fn, delay) {
    var index = 0;
    var cnt = 0;
    var i = 0;
    // Called once for each array element    
    function next() {
        if (index >= arr.length) {
            return;
        }
        cnt = +arr[index];
        i = 0;
        loop();
    }
    // Represents a single iteration of what was previously a for loop
    // Will either schedule the next iteration or move to the next element
    function loop() {
        if (i < cnt) {
            fn(index, i++);
            setTimeout(loop, delay); // delay before next iteration
        }
        else {
            ++index;
            setTimeout(next, delay); // delay before moving to next element
        }
    }
    if (arr.length) {
        next();
    }
}

我在"循环迭代"之间以及循环结束和下一个循环开始之间保持相同的delay，但这很容易改变。

查看效果

除非我误解了什么…

function runArray(arr, fn, delay, idx, cnt) {
    idx = idx || 0;
    cnt = cnt || 0;
    if(cnt >= arr[idx]) { 
        idx++; 
        cnt = 0; 
    }
    if(idx >= arr.length) 
        return;
    fn(idx, cnt);
    setTimeout(function() { runArray(arr, fn, delay, idx, cnt + 1) }, delay);
}
http://jsfiddle.net/Loycmb3b/8/

我可能不明白你想做什么，但是有了这段代码

runArray(theArray, theFunction, 400);

你正在执行的theArray和theFunction在400毫秒后发生，1000是一秒，所以如果你想要一个更实质性的暂停，增加400，这里我增加到4000(4秒)，暂停更明显。

http://jsfiddle.net/Loycmb3b/7/

相关文章：