Question

我试图从数组中顺序打印一些数据。数组具有以下格式：（（text，delay），（text，delay））我希望在下一次超时完成后开始每个超时。我已经走到了这一步，但我现在已经很难过了。超时都是在此代码的同时开始的。

 <script>
    var data = JSON.parse('<?php echo json_encode($data); ?>'); 
    for (i = 0; i < data.length; i++) { 
        texttime = data[i];
         (function (x) {
            setTimeout(function () {document.write(x[0]) +"<br>"}, x[1]*1000);
        })(texttime);
    }
</script>

谢谢！

Answer 1

我认为你想要的是按特定间隔按顺序执行操作。我想这会对你有所帮助。我更新了我的答案，$ data数组的json_encode将在以下js数组中。的更新
DEMO

var data = [ ["Peter is getting ready for work",20], ["Peter is on the train",10], ["Peter left the station and is walking to work",10] ]; sequence_operate(data,0); function sequence_operate(arr,index){ setTimeout(function(){ $("body").append("<div>"+arr[index][0]+" : <span class='green'>"+arr[index][1]+" minute</span>"); if(index<arr.length) sequence_operate(arr,index+1); },arr[index][1]*100); }

<强>原始
DEMO

var data = [ {"value":"this is first"}, {"value":"this is second"}, {"value":"this is third"}, {"value":"this is forth"}, {"value":"this is fifth"} ]; sequence_operate(data,0,500); function sequence_operate(arr,index,interval){ setTimeout(function(){ $("body").append("<div>"+arr[index].value); if(index<arr.length) sequence_operate(arr,index+1,interval); },interval); }

Answer 2

循环在这里不起作用，因为你不能在JavaScript中的for循环中等待。但是你也可以使用递归来迭代一个集合，并且由于setTimeout使用了一个回调，你可以实现一种递归回调：你可以为你要做的第一件事设置一个超时，然后在回调中为你设置为下一件事设置超时，依此类推，直到你到达数组的末尾。

以下是如何做到的：

(function () {

    var contentIndex = 0, timeoutIndex = 1;
    var data = JSON.parse('<?php echo json_encode($data); ?>');

    timeoutIterate(0, exists, consume, timeout);

    function timeoutIterate (i, conditionFn, consumerFn, timeoutFn) {
        if (conditionFn(i)) {
            setTimeout(function () {
                consumerFn(i);
                timeoutIterate(i + 1, conditionFn, consumerFn, timeoutFn);
            }, timeoutFn(i));
        }
    }

    function timeout (i) {
        return data[i][timeoutIndex] * 1000;
    }

    function content (i) {
        return data[i][contentIndex];
    }

    function exists (i) {
        return i < data.length;
    }

    function consume (i) {
        document.write(content(i));
    }

}());

对于循环和顺序超时

2 个答案: