Question

我正在尝试在JavaScript中设置一个功能，以淡入或淡出我页面上的某些元素。淡入淡出本身工作正常，但当其中一个试图取消另一个的动作时，我的问题就出现了。

//I know this is ugly, I'm just learning JavaScript again and plan to recode it after I learn some more...
var fadeOut = false

//set out to true to fade out, false to fade in
function fade(out) {
    var steps = 1
    var outSpeed = 100
    var inSpeed = 10
    var timer = 0

    if (out) {
            //fade out
            fadeOut = true
            for ( var i=100; i>=0; i-=steps ) {
                    if ( fadeOut ) {
                            setTimeout("set_el_opacity(" + (i / 100) + ")",
                            timer+=steps
                    } else {
                            break;
                    }
            }
    } else {
            //fade in
            fadeOut = false
            for ( var i=0; i<=100; i+=steps ) {
                    if( !fadeOut ) {
                            setTimeout("set_el_opacity(" + (i / 100) + ")",
                            timer+=steps
                    } else {
                            break;
                    }
            }
    }
}

现在，淡出被设置为比淡入淡出慢。我希望用户看到它慢慢消失，因此他们知道它是故意的，然后如果需要元素则快速淡入（消除一些混乱在不需要时从屏幕上显示。）

fade（true）工作正常，淡入淡出（false）工作正常并且速度更快。当我调用淡入淡出（真实），然后很快被淡入淡出（假）时，我的问题就出现了。淡入淡出与对方战斗然后，因为淡入淡出（真实）呼叫运行得更快，它首先完成，淡入淡出（虚假）呼叫继续完全消失。

我的问题是：如何使淡入淡出（假）调用取消淡入淡出（真实）调用的循环？

Answer 1

设置计时器时：

mytime = setTimeout('function()', 1000);

您可以使用clearTimeout取消它：

clearTimeout(mytime);

Answer 2

您应该使用fade()函数在调用clearTimeout()时取消活动超时。有关超时的更多信息，请查看this article。以下是基于您提供的代码的简短示例。

var timeoutId = null;

function fade(out) {
    // ...
    // Your variable declarations
    // ...

    // Cancel the active timeout, if any.
    clearTimeout(timeoutId);

    // Record the timeout ID inside your if-else blocks
    if (out) {
        // ...
        timeoutId = setTimeout( ... );
        // ...
    } else {
        // ...
        timeoutId = setTimeout( ... );
        // ...
    }
}

Answer 3

首先，在循环中激活许多计时器并不是一个好主意。您应该使用setInterval或从setTimeout处理程序中启动新计时器。

另一种方法是使用单个计时器以固定间隔触发并管理所有待处理的效果。您可以决定帧速率并让您的计时器（“计时器堆栈”）无限期运行，每帧都“勾选” - 当没有待处理的效果时，您可以选择开始/停止滴答。

Answer 4

以最简单的方式处理超时循环

function myFunc (terminator = false) {
    if(terminator) {
        clearTimeout(timeOutVar);
    } else {
        // do something
        console.log("loop");
        timeOutVar = setTimeout(function(){myFunc();}, 1000);
    }
}   
myFunc(true); //  -> start loop
myFunc(false); //  -> end loop

在JavaScript中取消定时循环？

4 个答案: