带有 Javascript 的 Img 动画答案

【问题标题】：Img Animation with Javascript带有 Javascript 的 Img 动画
【发布时间】：2016-06-11 12:36:22
【问题描述】：

为什么超时不起作用？如果我在没有睡眠功能的情况下工作，它们会返回给我一个未定义的数据.. 使用此功能，它们可以工作但没有睡眠时间，它们会直接转到最后一张图像.. :-/

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

【问题讨论】：

标签： javascript ajax image slideshow settimeout

【解决方案1】：

您需要将一个函数传递给setTimeout。您正在调用函数sleep 并传递它的结果。

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);

&lt;img id=test&gt;

这会设置一个重复的回调，每次都可以前进到下一帧。在上面的示例中，它将永远循环，或者您可以在完成后调用clearInterval(animation)。

【讨论】：

但是setTimeout是在循环中..可以举个例子..？
要记住的重要一点是 setTimeout 立即返回。它不会休眠 300 毫秒。所以他们都会同时排队。
我已经把它变成了一个可运行的 sn-p 来展示它的实际效果。

【解决方案2】：

好的，在 Nick 的帮助下，这是正确的代码：

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

【讨论】：