For Loop and Sequential Timeout
I am trying to consistently print some data from an array. The array has the following format: ((text, delay), (text, delay)) I want each timeout to start after the next timeout ends. I got this far, but now I'm very shy. Timeouts all start at the same time with this code.
<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>
Thank!
source to share
The loop doesn't work here because you can't wait in a for loop in JavaScript. But you can use recursion to iterate through the collection, and since setTimeout uses a callback, you can implement a kind of recursive callback: you can set a timeout for the first thing you want to do and then in a callback that you can set timeout for next thing and so on until you reach the end of the array.
Here's how you could do it:
(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));
}
}());
source to share
I think you want to perform operations in sequence at a specific interval. I think this will help you. I updated my answer, the json_encode of your $ data array will be in the following js array.
DEMO update
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);
}
original
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);
}
source to share