javascript - 多个setTimeout上的clearTimeout

我有多个这样的setTimeout函数:

    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中激活的:

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

我需要做的就是单击以隐藏不可见的跨度。

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

我不确定该怎么做是编写clearTimeout函数来停止循环。任何帮助是极大的赞赏。谢谢。

最佳答案

不知道您是否已经知道这一点，但是clearTimeout会接受一个timeoutID，该ID先前是从对setTimeout的调用中返回的。

因此，您需要将此超时ID分配给在需要取消时仍在作用域中的变量。然后在需要停止循环时将其传递给clearTimeout调用。

因为它只是一个整数id，所以另一个选择可能是使用诸如“domElement.setAttribute('timoutIDFirst');”之类的东西在dom元素上创建自定义属性。 (或jQuery中的attr)，然后在需要时使用getAttribute对其进行检索。

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

例如:

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

关于javascript - 多个setTimeout上的clearTimeout，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/425392/