多个setTimeout上的clearTimeout

Question

我有多个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函数.任何帮助是极大的赞赏.谢谢.

Answer 1

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

因此,您需要将此超时标识分配给一个变量,该变量保留在您需要取消它的范围内.然后在需要停止循环时将其传递给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);
            }
    );