0

我正在尝试在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) 工作正常，fade(false) 工作正常且速度更快。当我调用fade(true) 后不久调用fade(false) 时，我的问题就出现了。淡入淡出相互争斗，然后，由于 fade(true) 调用运行得更快，它首先完成，而 fade(false) 调用继续将其全部淡出。

我的问题是：我能做些什么来使淡入淡出（假）调用取消淡入淡出（真）调用的循环？

4

4 回答 4

7

当您设置计时器时：

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

您可以使用 clearTimeout 取消它：

clearTimeout(mytime);
于 2009-10-28T15:49:09.743 回答
0

fade()无论何时调用，您都应该使用该clearTimeout()函数取消活动超时。有关超时的更多信息，请查看这篇文章。这是基于您提供的代码的简短示例。

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( ... );
        // ...
    }
}
于 2009-10-28T15:51:34.373 回答
0

首先，在一个循环中触发许多计时器并不是一个好主意。您应该改为使用setInterval或触发您的setTimeout处理程序的新计时器。

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

于 2009-10-28T16:17:43.957 回答
0

处理超时循环的最简单方法

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
于 2017-04-26T07:11:29.487 回答