用于循环和顺序超时

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数组中。更新
演示

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

原件
演示

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