Showing different pictures within 0.08 seconds timeout

Question

I have this code which is supposed to show 24 images within a 0.08333 seconds interval. However it is only showing the last image. 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>

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

How can I make it show all images within a timeout of 0.08333 seconds

Update: I tried solving it and came up with this:

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

Why is it still not working and showing last image only?

Possible duplicate of [JavaScript closure inside loops – simple practical example](http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) — JJJ, Jul 10 '16 at 12:03
Also beware that it takes some time to load image. You might want to preload images before showing. — Yury Tarabanko, Jul 10 '16 at 12:06
You need to be aware that your for loop finishes within a couple of milliseconds. That means that all setTimeout-functions are fired within that tiny interval between the start and the end of your for-loop. They are not sequential. — 1sloc, Jul 10 '16 at 12:06
If there is certain tasks being done, the browser will place that `setTimeout` in a que. There is no guarantee that your function will fire exactly on time. JavaScript is a synchronous language on one thread, so functions depending on time are never 100% accurate. — zer00ne, Jul 10 '16 at 12:07
I added another trial at the end of this thread but it is still not working. — David Moore, Jul 10 '16 at 12:10
@Juhana, I have added while alternative and defined the variable outside of the loop. Your link was not helpful as I can't understand anything and it is not practical and too complicated. — David Moore, Jul 10 '16 at 12:16
@DavidMoore You don't. Javascript `var` keyword is function scoped not block scoped. Your alternative version is essentially the same. — Yury Tarabanko, Jul 10 '16 at 12:17

Roysh · Answer 1 · 2016-07-10T12:20:53.263

0

Try this code

    $(document).ready(function() {

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

edited Jul 10 '16 at 12:20

answered Jul 10 '16 at 12:06

Roysh

1,542
3
16
26

You need to add argument `i`. And fix intervals to be `83*i` – Yury Tarabanko Jul 10 '16 at 12:09
This is hacky. `setInterval` is better suited for a sequence of events. – 1sloc Jul 10 '16 at 12:21

score 0 · Answer 2 · answered Jul 10 '16 at 12:17

Use setInterval for such a case:

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

Showing different pictures within 0.08 seconds timeout

2 Answers2