在JavaScript中取消定时循环？

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);