我的功能没有回来

Question

Ehllo! My function isn't returning (exiting) when conditions are met.

var arrowReady = false;
var arrowImage = new Image();
var deg = 0;
arrowImage.onload = function () {
    arrowReady = true;
    function moveArrow() {
        setInterval(function() {
            ctx1.save();
            deg++;
            ctx1.rotate(deg * Math.PI / 180);
            // Here is  ^  the amount of degrees it turns.
            ctx1.clearRect(300, 200, 52, 310);
            ctx1.drawImage(arrowImage, 300, 100, 42, 300);
            ctx1.restore();
        }, 100);

        if (deg == 40) return;

    }
}

From my understanding, when deg = 40, the function should stop. But, it's not. Any suggestions?

Answer 1

Tricky javascript going on here. moveArrow is only called once on document load. returning or not will not stop your interval from running.

You need to save a reference to the interval:

var interval = setInterval(...

And then from WITHIN the anonymous setInterval function, when deg ==40 you will want to clearInterval(interval) to stop it from running.

Try this:

var arrowReady = false;
var arrowImage = new Image();
var deg = 0;
arrowImage.onload = function () {
    arrowReady = true;
    function moveArrow() {
        var interval = setInterval(function() {
            if (deg == 40) {
              clearInterval(interval);
              return;
            }
            ctx1.save();
            deg++;
            ctx1.rotate(deg * Math.PI / 180);
            // Here is  ^  the amount of degrees it turns.
            ctx1.clearRect(300, 200, 52, 310);
            ctx1.drawImage(arrowImage, 300, 100, 42, 300);
            ctx1.restore();
        }, 100);

    }
}

Answer 2

I am not a JavaScript programmer but don't you need to specify a value to return

EXAMPLE if (deg == 40) return deg;

Answer 3

It's not clear what that last conditional is even supposed to do. There's nothing after it, so the function is going to stop execution there anyway. Why does it matter if deg == 40 if that's where the function call ends no matter what?

More to the point, I'm sure, is the fact that the function in question doesn't actually change the value of deg . So deg will never equal 40 on that line. What you're doing is queuing up another function to run at a later time (100 ms?). After that function is queued up, the control immediately goes to the if statement (before that other function runs).

So deg is being modified, in a completely different function scope, after the if statement executes.