javascript - 我的函数没有返回

Question

哎哟!当条件满足时，我的函数不会返回(退出)。

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 时，该函数应该停止。但是，事实并非如此。有什么建议吗？

Answer 1

这里发生了棘手的 JavaScript。 moveArrow 仅在文档​​加载时调用一次。返回与否不会停止您的间歇运行。

您需要保存对间隔的引用:

var interval = setInterval(...

然后在匿名 setInterval 函数中，当 deg ==40 时，您需要 clearInterval(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);

    }
}