Javascript setInterval unwanted pause

Question

I am trying to create an animation with a few images in javascript and I have the code working, but after it runs through images in reverse then it pauses slightly before it starts going forward again. I'm wondering how I get rid of the pause?

Here is the code in action http://isogashii.com/projects/javascript/ch10/dp10-6.html

HTML

<img id="pin" src="assets/pin0.gif" alt="pin animation" />

Javascript

var pin = new Array(9);
var curPin = 0;
var x = false;

// caching images
for (var imagesLoaded=0; imagesLoaded < 9; ++imagesLoaded) {
    pin[imagesLoaded] = new Image();
    pin[imagesLoaded].src = "assets/pin" + imagesLoaded + ".gif";

    //starts pinF function when all images are cached
    if (imagesLoaded == 8) {
        setInterval("pinF()", 120);
    }
}

function pinF() {

    if (x == true) {
        --curPin;
        if (curPin == 0) {
            x = false;
        }
    }
    if (x == false) {
        ++curPin;
        if (curPin == 8) {
            x = true;
        }
    }

    document.getElementById("pin").src = pin[curPin].src;
}

You are caching the images, but are not actually waiting for them to load before trying to use them. See [this post](http://stackoverflow.com/questions/8264528/image-preloader-javascript-that-supports-events/8265310#8265310) for how to preload a bunch of images and then get notified when they are all loaded. — jfriend00, Apr 06 '14 at 18:50
you need to use `else if` not just `if` for the second `if` block, because of this it repeats some of the pics before continuing on — Patrick Evans, Apr 06 '14 at 18:51
@jfriend00 you are right, but i don't know if you would need to load all the images before starting the animation, it really depends, it might be that you would want to approach the problem using a just in time pattern. So go to the next step if and only if the next image is cached. — Victory, Apr 06 '14 at 18:56
@Victory - if you want to guarantee stall free behavior regardless of network download speed, then you have to gather all resources before starting. If you're willing to an occasional possible delay, you can try other strategies, but the OP was asking to get rid of a delay. Note for testing purposes, one would only ever see the delay the first time this was run because after that the images would all be in the browser cache and the delay wouldn't be seen. — jfriend00, Apr 06 '14 at 19:07

score 0 · Answer 1 · answered Apr 06 '14 at 18:52

0

Currently, you do two "frames" of pin1. Change the logic of pinF not to do that.

To be specific, the first time x == true and curPin == 2, the first if executes, reducing curPin to 1.

The second time, x == true still, the first if brings curPin down to 0 and inverts x. Then, the second if increments curPin back to 1.

answered Apr 06 '14 at 18:52

guest

6,450
30
44

Oh, I see what you're saying. I'll have to think about it a bit more to figure that out. I'm still rather new to Javascript ^^; Thanks. – DiddleDot Apr 06 '14 at 19:01

score 0 · Accepted Answer · answered Apr 06 '14 at 19:01

in the x == true portion of the if statement, you should set the curPin to be one otherwise you are duplicating the curPin = 1.

http://jsfiddle.net/A77cx/

function pinF() {

    if (x == true) {
        --curPin;
        if (curPin == 0) {
            curPin = 1;
            x = false;
        }
    }
    if (x == false) {
        ++curPin;
        if (curPin == 8) {
            x = true;
        }
    }

    document.getElementById("pin").src = pin[curPin].src;
}

Awesome man. I probably would have spent hours banging my head over this. Thanks. — DiddleDot, Apr 06 '14 at 19:13

Javascript setInterval unwanted pause

2 Answers2