Clearinterval JS之后的Setinterval重叠

Question

The story is a balloon that falls down. if you manage to click on the balloon('Stop' function) you win. otherwise, if it down 450px you lose.

The problem is when I press the balloon: its change the src, alert me and clearInterval - Now I thought that it will stop or wait for the next event. but, after I click 'ok' on the alert its keep falling...

My Code:

function Start() {
    num = Math.floor(Math.random() * 501);
    document.getElementById("balon").style.left = num + 'px';
    var id = setInterval(function() {
        if (posX > 450 && ok) {
            alert("Looser");
            clearInterval(id);
        } else {
            posX += Vpos * dt;
            document.getElementById("balon").style.top = posX + 'px';
        }
    }, dt);
}

function Stop() {
    document.getElementById("balon").src = 'JS Pics/balon2.gif';
    alert("Winner");
    clearInterval(id);


}

In conclusion, I found some way to stop it by adding Bool variable. see below: Anyway, I am not sure why this happens(would be happy for explanation) or another way to fix this. Thanx.

function Start() {
    num = Math.floor(Math.random() * 501);
    document.getElementById("balon").style.left = num + 'px';
    var id = setInterval(function() {
        if (posX > 450 && ok) {
            alert("Looser");
            clearInterval(id);
        } else {
            if (ok) {
                posX += Vpos * dt;
                document.getElementById("balon").style.top = posX + 'px';
            } else {
                clearInterval(id);
            }
        }
    }, dt);
}

function Stop() {
    ok = false;
    document.getElementById("balon").src = 'JS Pics/balon2.gif';
    alert("Winner");
    clearInterval(id);
}

Answer 1

id is in scope of Start function, so it's undefined in scope of Stop function.
You can declare it outside both functions, so they could both access it:

var id;

function Start() {
    num = Math.floor(Math.random() * 501);
    document.getElementById("balon").style.left = num + 'px';
    id = setInterval(function () {
        if (posX > 450 && ok) {
            alert("Looser");
            clearInterval(id);
        }
        else {
                posX += Vpos * dt;
                document.getElementById("balon").style.top = posX + 'px';
        }
    }, dt);
}

function Stop() {
    document.getElementById("balon").src = 'JS Pics/balon2.gif';
    alert("Winner");
    clearInterval(id);
}

Your fix with ok works, because you don't declare it with keyword var so it's assigned to window object (or you have declared it in outer scope and forgot to append in code snippet).