Question

我有这个代码，它应该在0.08333秒的间隔内显示24个图像。但它只显示最后一张图像。 HTML：

<!DOCTYPE html><html><head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script><script type="text/javascript" src="script.js"></script><title>page</title></head><body>
<img src="untitled.0001.jpg">
</body></html>

在javascript中：

$(document).ready(function () {
$(document).keydown(function(e) {
    switch(e.which) {
        case 39: // right
            for (var i = 1; i != 24; i++) {
                setTimeout(function(){
                        $( "img" ).replaceWith( "<img src='image.000"+ i +".jpg'>");
                },83); 
            }
            break;
        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
});
});

如何在超时0.08333秒内显示所有图像

更新：我尝试解决它并想出了这个：

$(document).ready(function () {
$(document).keydown(function(e) {
    switch(e.which) {
        case 39: // right
        var count = 1;
            while (count!=24) {
                var waiting = 83 * count;
                setTimeout(function() {$( "img" ).replaceWith( "<img src='avatar/walk/HumanWalk.000"+ count +".jpg'>");}, waiting);
                count+=1;
            }
            break;
        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
});
});

为什么它仍然不起作用并仅显示最后一张图像？

Answer 1

试试此代码

jqXHR.always()

Answer 2

对这种情况使用setInterval：

$(document).keydown(function(e) {
  switch (e.which) {
    case 39:
      var c = 0;
      var interval = setInterval(function() {
        // set the source of your image to
        // 'image.000' + (c++ -1) + '.jpg'
      }, 83);
      if (c === 24) clearInterval(interval);
  }
});

在0.08秒内显示不同的图片超时

2 个答案: