JavascriptによるImgアニメーション

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に渡す。あなたはです。sleepを呼び出し、そのの結果をとすると、となります。

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

しかし、あなたは、同時にタイムアウトの束を設定しているので、それはまだ、動作しませんので、彼らはすべてのトリガ300msの後に同時によ。

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

OK]をクリックして、ニックの助けを借りて、これは正しいコードです：

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