0

えーっ！条件が満たされたときに関数が返されません (終了しません)。

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;

    }
}

私の理解では、deg = 40 のとき、関数は停止するはずです。しかし、そうではありません。助言がありますか？

4

3 に答える 3

2

トリッキーな JavaScript がここで行われています。moveArrowドキュメントの読み込み時に一度だけ呼び出されます。戻るかどうかは、間隔の実行を停止しません。

間隔への参照を保存する必要があります。

var interval = setInterval(...

そして、実行を停止したいsetInterval場合は、無名関数の WITHIN から。deg ==40clearInterval(interval)

これを試して：

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

    }
}
于 2013-04-17T16:56:18.230 に答える
0

私は JavaScript プログラマーではありませんが、返す値を指定する必要はありませんか?

例if (deg == 40) return deg;

于 2013-04-17T16:55:52.340 に答える