多个setTimeout上的clearTimeout [英] clearTimeout on multiple setTimeout

问题描述

我有多个这样的setTimeout函数：

I have multiple setTimeout functions like this:

    function bigtomedium(visiblespan) {
        visiblespan.removeClass('big').addClass('medium'); 
        setTimeout(function(){ mediumtosmall(visiblespan);},150);
    };

    function mediumtosmall(visiblespan) {
        visiblespan.removeClass('medium').addClass('small');
        setTimeout(function() { smalltomedium(visiblespan); },150);
    };

    function smalltomedium(visiblespan) {
        visiblespan.removeClass('small').addClass('medium');
        setTimeout(function() { mediumtobig(visiblespan); },150);
    };

    function mediumtobig(visiblespan) {
        visiblespan.removeClass('medium').addClass('big');
        setTimeout(function() { bigtomedium(visiblespan); },150);
    };

这是在jquery onclick中激活的：

Which is activated in jquery onclick:

    $('div.click').click(
        function(event) {
            var visiblespan = $('span:visible');
            mediumtosmall(visiblespan);
        }
    );

我需要做的是点击隐藏不可见范围。

What I need to do, is to get the click to hide invisible span as well.

    $('div.click').click(
        function(event) {
            var visiblespan = $('span:visible');
                            var invisiblespan = $('span:not(:visible)');
            mediumtosmall(visiblespan);
            clearTimeout(invisiblespan);
        }
    );

我不知道该怎么做才能编写将停止循环的clearTimeout函数。任何帮助是极大的赞赏。谢谢。

What I'm not sure how to do is to write the clearTimeout function that will stop the loop. Any help is greatly appreciated. Thanks.

推荐答案

不确定您是否已经知道这一点但是，clearTimeout接受之前从调用返回的timeoutID setTimeout的。

Not sure if you are already aware of this but, clearTimeout accepts a timeoutID that is previously returned from a call to setTimeout.

因此，您需要将此超时ID分配给一个变量，该变量保留在您需要取消它的范围内。然后在需要停止循环时将其传递给clearTimeout调用。

Therefore you need to assign this timeout id to a variable that remains in scope for when you need to cancel it. Then pass it to the clearTimeout call when you need to stop the loop.

因为它只是一个整数id，另一个选项可能是在dom上创建自定义属性使用类似domElement.setAttribute（'timoutIDFirst'）;的元素（或jQuery中的attr）然后在需要时使用getAttribute检索它。

As it is just an integer id, another option might be to create a custom attribute on a dom element using something like "domElement.setAttribute('timoutIDFirst');" (or attr in jQuery) and then just retrieve it using getAttribute when required.

考虑到你有多个计时器，在DOM元素上使用自定义属性可能有助于保持整洁。

Considering you have multiple timers, using custom attributes on the DOM elements may help keep things tidier.

EG ：

      function mediumtosmall(visiblespan) {
                vt.removeClass('medium').addClass('small');

                // Store the timeoutID for this timer
                var storedTimeoutID=setTimeout(function() { smalltomedium(visiblespan); },150);
                 $('span:visible').attr('timeoutID',storedTimeoutID);

        };

然后：

    $('div.click').click(
            function(event) {
                    var visiblespan = $('span:visible');
        var invisiblespan = $('span:visible');
                    mediumtosmall(visiblespan);

                    var storedTimeoutID=invisibleSpan.attr('timeoutID');
                    // Pass the ID to clearTimeout
                    clearTimeout(storedTimeoutID);
            }
    );

这篇关于多个setTimeout上的clearTimeout的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！