Iterate through json lines at intervals

Question

There is such code:

function get_frame(){ $.ajax({ url: "/ajax/zone_moves.php", dataType: "json", type: "POST", data: {action:"get_frame"}, success: function(resp) { $.each(resp, function(){ $("div#3_4").text(this.text) }) } }) }

Its essence is as follows. We receive two-dimensional json array from the server. In each array there is a text field. Tell me how, for example, with a gap of 5 seconds to display this field, for example, an alert or as in the code in div'e. Those. the answer is received, the text field of the first line of the array in the diva is shown, after 5 seconds the next line, etc. Until the array is over. And as the end, you need to again get new data from the server.

Those. at the moment, the code seems to be working (without re-polling, but this is not a problem), but it goes over the array rows so quickly that it is not visible visually and looks as if only the last line is displayed in a diva.

Accepted Answer · 2012-03-12T07:14:07

It is possible as-nibu so:

 function get_frame(){ $.ajax({ url: "/ajax/zone_moves.php", dataType: "json", type: "POST", data: {action:"get_frame"}, success: function(resp) { var i = 0; for(var pd in resp){ // перебираем свойства объекта (function(){ // создаём пространство имён для сохранения i и pd внутри таймаута var p = i, d = pd; setTimeout(function(){ // устанавливаем паузы между сменами $("div#3_4").text(resp[d].text) }, 5000 * p); })(); i++; } setTimeout(function(){ get_frame(); // получаем новую порцию данных с сервера }, 5000 * i); } }) }

but in general you have a problem in that you forgot to set the interval, and therefore your $ .each instantly goes over json and also quickly changes the values in the diva

> but in general you have a problem in that you forgot to set the interval, and therefore you $ .each instantly goes over json and also quickly changes the values in the diva This problem is the essence of the question =)
I’m undermining something, well, if I copy the code for success, I have to earn it

Answer 2 · 2012-03-12T07:45:16

You can use setInterval and closure:

 function get_frame(){ $.ajax({ url: "/ajax/zone_moves.php", dataType: "json", type: "POST", data: {action:"get_frame"}, success: function(resp) { // если нужно можно сделать resp.reverse var intervalId; var closure = function () { if (resp.length == 0) { clearInterval(intervalId); get_frame(); return; } var elt = resp.pop(); $("div#3_4").text(elt.text); }; intervalId = setInterval(closure, 5000); } });

There is no way to check, but it should work.

But what needs to be corrected so that there is no pause before showing the 1st element of the array?
And then it turns out after receiving the data, you also have to wait 5 seconds before the appearance of the 1st element.

Answer 3 · 2012-03-12T08:34:32

 Array.prototype.iterateTimeout = function(timeout, action, done) { done = done !== undefined ? done : function(){}; var arr = this; for( var i=0, l=arr.length, last=l-1; i<l; ++i ) { (function( i ){ setTimeout(function() { action( arr[i] ); if(i === last) { done(); } }, i*timeout) }( i )) } }

Example:

  ([1,2,3,4,5]).iterateTimeout(500, function(v){ console.log(v) }, function(){console.log("completed")} );

Looping example:

 function foreverIterateTimeoutExample(){ ([1,2,3,4,5]).iterateTimeout(500, function(v){ console.log(v) }, foreverIterateTimeoutExample) } foreverIterateTimeoutExample();

And that:

 function get_frame(){ $.ajax({ url: "/ajax/zone_moves.php", dataType: "json", type: "POST", data: {action:"get_frame"}, success: function(resp) { resp.iterateTimeout(5000, function(text){ $("div#3_4").text(text) }, get_frame) }) }

If you also need a timeout before calling a callback, add it yourself. And it is better then in the done parameter itself, something like this:

  success: function(resp) { resp.iterateTimeout(5000, function(text){ $("div#3_4").text(text) }, function() { setTimeout(get_frame, 5000); })

The last comment smiled, ok, for particularly versed people - without a prototype:

  var iterateTimeout = function( arr, timeout, action, done) { done = done !== undefined ? done : function(){}; for( var i=0, l=arr.length, last=l-1; i<l; ++i ) { (function( i ){ setTimeout(function() { action( arr[i] ); if(i === last) { done(); } }, i*timeout) }( i )) } } iterateTimeout([1,2,3,4,5], 500, function(v){console.log(v)}, function(){console.log("done")}) function get_frame(){ $.ajax({ url: "/ajax/zone_moves.php", dataType: "json", type: "POST", data: {action:"get_frame"}, success: function(resp) { iterateTimeout(resp, 5000, function(text){ $("div#3_4").text(text) }, get_frame) }) }

PS: learn the language, what you wrote terribly O_O

> PS: learn the language, what you wrote terribly O_O And what's so terrible?
> for those who are particularly knowledgeable - without a prototype, are you always such a "smart guy"?
@DemoS - I'm not talking about your code, but about "prototype is not used."
You compare the prototype function from the non-prototype, do you see many differences?
IMHO - any adequate June would rewrite the function with ease and would understand that the prototype is here used for beauty and brevity.
@DemoS - when a person does not know basic things and, instead of something to understand in silence, he writes that he doesn’t sing, I don’t know, I don’t know how, etc.
For the first two answers (IMHO) are much neater, clearer, more beautiful and simpler.
> when a person does not know basic things and, instead of something to understand in silence, he writes that he doesn’t sing, I don’t know, I don’t know, etc.
1. And the meaning of this site then, if everyone will understand themselves ???
Therefore, your answer is more likely considered "not appropriate"
Prototypes are the native part of the JavaScript language, this example has absolutely nothing to do with the prototype library. If you don’t know anything about them about prototypes, it’s not me who’s to blame.
The first two answers solve the problem locally, but I gave an example of solving the problem globally.
The first method is practically my answer, except that the code in it is written "in the forehead".
The second answer, simply, takes a completely different approach.
Yeah, now let's list all the features of the language in the topic tags ... Smiled: D

Iterate through json lines at intervals

3 answers 3

More articles: