javascript - Javascript 中的运行顺序更改

Question

我正在尝试这段代码，但是当我在浏览器(新 Chrome)中测试时，move_1_3 函数首先发生，然后是 move_1_2，您能帮助一下如何纠正它吗？ (代码中我想改变3张图片的位置)

window.onload = main;
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

function main(){
    backGround.src = "http://www.ednetti.hu/images/cj0n9l0o6m.jpg";
    backGround.onload = function(){
        context.drawImage(backGround, 0, 0, w, h);
        ballImg.src = "http://www.clipartsfree.net/vector/large/SABROG_Glass_Blue_Ball_Vector_Clipart.png";
        ballImg.onload = function (){
            cupImg.src = "http://www.clker.com/cliparts/8/m/s/0/t/K/blue-cup-hi.png";
            cupImg.onload = function(){
                timer = setInterval(move_1_2, timeStep);
                timer = setInterval(move_1_3, timeStep);
                //time3 = setInterval(move_2_3, timeStep);

            };
        };
    };
}

    function move_1_2 () {
    if (steps >2){
        return;
    }

    posX =((posX2-posX1)/density)*i;
    bposX =(bposX2-bposX1)/density*i;
    context.clearRect(0, 0, w, h);
    context.drawImage(backGround, 0, 0, w, h);
    if(ballPos == 1){
        context.drawImage(ballImg, bposX1 + bposX, bposY, ballw, ballh);
    }
    else if(ballPos == 2){
        context.drawImage(ballImg, bposX2 - bposX, bposY, ballw, ballh);
    }
    else if(ballPos == 3){
        context.drawImage(ballImg, bposX3, bposY, ballw, ballh);
    }
    context.drawImage(cupImg, posX1 + posX, posY, cupw, cuph);
    context.drawImage(cupImg, posX3, posY, cupw, cuph);
    context.drawImage(cupImg, posX2 - posX, posY, cupw, cuph);

    i++;
    if (i == density){
        i = 0;
        steps ++;
      switch (ballPos){
        case 1:
          ballPos = 2;
          break;

        case 2:
          ballPos = 1;
          break;

      }
        clearInterval(timer);
    }
}
function move_1_3 () {
if (steps >2){
    return;
}

posX =((posX3-posX1)/density)*i;
bposX =(bposX3-bposX1)/density*i;
context.clearRect(0, 0, w, h);
context.drawImage(backGround, 0, 0, w, h);
if(ballPos == 1){
    context.drawImage(ballImg, bposX1 + bposX, bposY, ballw, ballh);
}
else if(ballPos == 3){
    context.drawImage(ballImg, bposX3 - bposX, bposY, ballw, ballh);
}
else if(ballPos == 2){
    context.drawImage(ballImg, bposX2, bposY, ballw, ballh);
}
context.drawImage(cupImg, posX1 + posX, posY, cupw, cuph);
context.drawImage(cupImg, posX2, posY, cupw, cuph);
context.drawImage(cupImg, posX3 - posX, posY, cupw, cuph);

i++;
if (i == density){
    steps ++;
    switch(ballPos){
        case 1:
            ballPos = 3;
            break;
        case 3:
            ballPos = 1;
            break;
        case 2:
            ballPos = 2;
            break;
    }
    clearInterval(timer);
    i = 0;
}
}

Answer 1

一种解决方案是将行 timer = setInterval(move_1_3, timeStep); 移动到函数 move_1_2 内部，定位在该函数的最末尾之前。

如果由于函数重用而无法正常工作，您仍然可以通过对匿名函数使用单个 setInterval 来依次运行一个函数:

    cupImg.onload = function(){
        timer = setInterval(function() {
                    move_1_2();
                    move_1_3();
                    // move_2_3();
                }, timeStep);
    };