Javascript设置间隔不必要的暂停

我正在尝试用javascript创建一个带有一些图像的动画，我已经让代码运行了，但是在它以相反的方式运行完图像之后，它会稍微暂停一下，然后再继续。我想知道我如何摆脱停顿

下面是正在运行的代码

HTML

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

---

目前，您需要进行两帧pin1。更改pinF的逻辑以不执行此操作

具体来说，第一次执行x==true和curPin==2时，执行第一个if，将curPin减少到1

第二次，x==true，第一次if将curPin降为0并反转x。然后，第二个if将curPin增加回1。

在if语句的x==true部分，您应该将curPin设置为1，否则您将复制curPin=1

---

您正在缓存图像，但实际上并不是在尝试使用它们之前等待它们加载。请参阅，了解如何预加载一组图像，然后在它们全部加载时收到通知。对于第二个if块，您需要使用else if而不仅仅是if，因为它会在继续之前重复一些图片on@jfriend00你是对的，但我不知道你是否需要在开始动画之前加载所有图像，这取决于，您可能希望使用即时模式来解决问题。因此，如果且仅当下一个映像被缓存时，请转到下一步。@Victory-如果您想保证无失速行为，而不考虑网络下载速度，则必须在开始之前收集所有资源。如果你愿意偶尔延迟，你可以尝试其他策略，但OP要求消除延迟。注意：出于测试目的，只有在第一次运行时才会看到延迟，因为在那之后，图像都会在浏览器缓存中，延迟不会被看到。哦，我明白你的意思了。我得再想一想才能弄明白。我对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;
}

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