ajax - Img Animation with Javascript -
why timeout don't work? if work without function sleep, return me undefined data.. function work without sleeping time, go directly last image.. :-/
function sleep(value, data, i) { document.getelementbyid(value).src = data[i]; } function imganimation(value){ var img = document.getelementbyid(value).src; $.ajax({ type: "post", url: "static/cercathumbs.php", data: 'id=' + value, datatype: 'json', success: function (data) { var elements = object.keys(data).length; (var = 0; < elements; i++) { if(i == elements){i = 0;} settimeout(sleep(value, data, i), 300); } } }); }
you need pass function settimeout
. you're calling function sleep
, passing result.
settimeout(function() { sleep(value, data, i); }, 300);
but still won't work, because you're setting bunch of timeouts @ same time, they'll trigger 300ms later @ same time. animate might try like:
var data = [ 'https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.2/assets/png/0030.png', 'https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.2/assets/png/0031.png', 'https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.2/assets/png/0032.png', ] var frame = 0; var elements = data.length; var animation = setinterval(function() { frame = (frame + 1) % elements; document.getelementbyid('test').src = data[frame]; }, 300);
<img id=test>
this sets single repeating callback can advance next frame each time. in example above loop forever, or can call clearinterval(animation)
once you're finished.
Comments
Post a Comment