我的功能没有回来

Question

Ehllo！ 当满足条件时，我的功能不会返回（退出）。

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(...

然后从WITHIN匿名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);

    }
}

Answer 2

我不是JavaScript程序员，但您不需要指定要返回的值

示例if (deg == 40) return deg;

Answer 3

目前尚不清楚最后一个条件甚至应该做什么。 之后什么也没有，所以无论如何，该功能将停止执行。 如果这是函数调用结束的地方，那么为什么如果deg == 40则无关紧要？

更重要的是，我确信，这个函数实际上并没有改变 deg的值。 所以deg在那条线上永远不会等于40 。 你正在做的是排队另一个函数以便稍后运行（100毫秒？）。 在该函数排队后，控件立即转到if语句（在其他函数运行之前）。

因此，在if语句执行之后，在一个完全不同的函数范围内修改deg 。