jQuery中变量更改后的重复功能答案

【问题标题】：Repeating function after variable changes in jQueryjQuery中变量更改后的重复功能
【发布时间】：2015-09-07 21:18:04
【问题描述】：

我希望每次单击按钮时一个接一个地出现 4 个文本元素。这是我用来实现它的代码...

$('.btn').click(function(){
    $('.text').css({ 'opacity': '0' });

    function loadText(){
        var textNo = 1;

        function nextText(){    
            $('.text'+textNo).animate({ 'opacity': '1' }, 400);
            textNo += 1;
        }

        if (textNo <= 4){
            nextText(); 
        };  
    }   

    setTimeout(loadText, 300);
});

我希望 nextText() 函数重复 4 次，尽管再次调用它似乎没有任何效果。我在这里错过了什么明显的东西吗？

您可以在这里限时查看：http://thetally.efinancialnews.com/tallyassets/ceo-survey/index.html

我现在部分地意识到了这个问题。当调用 nextText 时，该函数内没有任何内容可以再次运行它。你能在函数中调用函数吗？

【问题讨论】：

标签： javascript jquery html function loops

【解决方案1】：

您需要使用 setInterval 方法而不是 setTimeout 方法。所以替换这个：

setTimeout(loadText, 300);

有了这个：

setInterval(loadText, 300);

【讨论】：

运行 4 次后不会停止。它将永远运行它（除了前 4 个之外什么都不做）。

【解决方案2】：

使用setInterval 重复调用函数并移动textNo 以便在后续调用中可以访问其递增值。

一旦条件满足，总是使用clearInterval取消重复运行的函数

使用

$('.btn').click(function() {
    $('.text').css({
        'opacity': '0'
    });

    //Move the variable outside
    var textNo = 1;

    function loadText() {
        function nextText() {
            $('.text' + textNo).animate({
                'opacity': '1'
            }, 400);
            textNo++;
        }
        if (textNo <= 4) {
            nextText();
        } else {
            //Cancels repeated action which was set up using setInterval
            clearInterval(interval);
        }
    }

    //Calls a function or executes a code snippet repeatedly, with a fixed time delay between each call to that function. 
    var interval = setInterval(loadText, 300);
});

【讨论】：

谢谢，这样回答了我刚才要问的问题。 'setInterval 不只是无限重复吗？这是一个问题吗？'

【解决方案3】：

loadText 不可用于 setTimeout，它包含在“点击”函数中。您可以简单地将 loadText 函数移到点击定义之外，如下所示。

$('.btn').click(function() {
    $('.text').css({
        'opacity': '0'
    });
    setTimeout(loadText, 300);
});

function loadText() {
    var textNo = 1;

    function nextText() {
        $('.text' + textNo).animate({
            'opacity': '1'
        }, 400);
        textNo += 1;
    }
    if (textNo <= 4) {
        nextText();
    };
}

【讨论】：

loadText 可用于 setTimeout，因为它是在调用 setTimeout 的同一函数中定义的

【解决方案4】：

另一个带有setTimeout 的版本，但是稍微修改了没有nextText() 的代码，它已经（某种程度）被动画回调所取代。正如其他人已经说过的那样，将var textNo = 1;移到loadText()之外。

$('.btn').click(function() {
    $('.text').css({ opacity: 0});
    var textNo = 1, timer;

    function loadText() {
        $('.text' + textNo).animate({
            opacity: 1
        }, 400, function() {
            if ( textNo++ <= 4) {
                loadText();
            } else {
                clearTimeout(timer);
            }
        });
    }

    timer = setTimeout(loadText, 300);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text text1">t1</div>
<div class="text text2">t2</div>
<div class="text text3">t3</div>
<div class="text text4">t4</div>
<button class="btn">Button</button>

【讨论】：