Img Анимация с помощью Javascript

Question

Почему тайм-аут не работает? Если я работать без функции сна, они возвращаются ко мне неопределенные данные .. С помощью этой функции они работают, но без сна времени, они идут непосредственно к последнему изображению ..: -/

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; 
     for (var i = 0; i < elements; i++) { 
       if(i == elements){i = 0;} 
       setTimeout(sleep(value, data, i), 300); 
     } 
    } 
}); 
} 

Answer 1

Вам нужно для передачи функции setTimeout. Вы находитесь , обжигая и используя его .

setTimeout(function() { 
    sleep(value, data, i); 
}, 300); 

Но она по-прежнему не будет работать, потому что вы настраиваете кучу времени ожидания в то же время, так что они будут все триггерный 300мсом позже в то же время. Для анимации вы можете попробовать что-то вроде:

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>

Это создает единую повторяющуюся функцию обратного вызова, которая может перейти к следующему кадру каждый раз. В приведенном выше примере он будет работать навсегда, или вы можете позвонить clearInterval(animation), как только закончите.

Answer 2

Хорошо, с помощью Ника, это правильный код:

function imgAnimation(value){ 
    $.ajax({ 
    type: "POST", 
    url: "static/cercaThumbs.php", 
    data: 'id=' + value, 
    datatype: 'json', 
    success: function (data) { 
     var elements = Object.keys(data).length; 
     var frame = 0; 
     var animation = setInterval(function() { 
     frame = (frame + 1) % elements; 
     document.getElementById(value).src = data[frame]; 
     }, 500); 
     document.getElementById(value).addEventListener("mouseout", function(){ 
      clearInterval(animation); 
      document.getElementById(value).src = data['0']; 
     }); 
    } 
    }); 
}