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语句（在其他函数运行之前）。

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

我的功能没有回来

3 个答案: