Javascript setInterval 不必要的暂停

Question

我正在尝试用 javascript 创建一个带有一些图像的动画，并且代码可以正常工作，但是在它反向运行图像之后，它会稍微暂停一下，然后再开始前进。我想知道如何摆脱暂停？

这是正在运行的代码 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;
}

Answer 1

在 if 语句的 x == true 部分，您应该将 curPin 设置为 1，否则您将复制 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;
}