Javascript，变量值的本地复制......努力实现它

Question

我有我认为是一个简单的javascript / jquery函数（淡出一个div，淡入另一个...循环，直到它达到最大值，然后从开始回来。我遇到的问题是，然后淡化下一个div我需要递增全局计数器。执行此递增会增加它，因为我假设我创建的局部变量保持对全局变量的相同引用。

下面的代码示例应该更容易解释。 谁能发现我做错了什么？

var current_index = 1;

$(document).ready(function() {
    $(function() {
        setInterval("selectNextStep()", 3000);
    });
});

function selectNextStep() {
    $("#step_"+current_index).fadeOut('slow', function() {
        var next = current_index;
        next = next + 1;
        $("#step_"+next).fadeIn('slow', function() {
            if (current_index == 4) current_index = 1;
            else current_index ++;
        });
    });
}

Answer 1

我没有看到你的代码方式有任何双倍的增量..

问题是next变量超出了似乎是极限的4值，并尝试淡化不存在的元素。 所以重置currentIndex的代码永远不会执行..

尝试添加if (next > 4 ) next = 1; 增加next变量后

http://jsfiddle.net/5zeUF/上的示例

Answer 2

我认为你最终会遇到竞争条件，因为时间间隔试图淡出并且回调试图淡出事物。 对于这种设置，让淡入淡出回调开始下一轮更有意义。

同样使用基于0的索引可以使数学更容易。

var current_index = 0; // zero indexes makes math easier

$(document).ready(function () {
    $(function () {
      // use timeout instead of interval, the fading callbacks will 
      // keep the process going
        setTimeout(selectNextStep, 3000);
    });
});

function selectNextStep() {

  // +1 to adapt index to element id
    $("#step_" + (current_index + 1)).fadeOut('slow', function () {

        var next = current_index + 1;

       // keeps index in range of 0-3
        next = next % 4; // assuming you have 4 elements?
        current_index = (current_index + 1) % 4; 

      // callback will start the next iteration
        $("#step_" + (next + 1)).fadeIn('slow', function () {
            setTimeout(selectNextStep, 3000);
        });

    });
}

演示： http ： //jsbin.com/exufu

Answer 3

不是$（function（）{}）; 和$（document）.ready（function（）{}）一样，所以你要初始化selectNextStep两次（因此是双增量）？

Answer 4

试试这个。 稍微简化一下。 在下一个fadeIn()之前增加（并根据需要重置） current_index 。

示例： http ： //jsfiddle.net/r7BFR/

var current_index = 1;

function selectNextStep() {
    $("#step_" + current_index).fadeOut('slow', function() {
        current_index++;
        if (current_index > 4) current_index = 1;
        $("#step_" + current_index).fadeIn('slow');
    });
}

$(document).ready(function() {
    setInterval(selectNextStep, 3000);
});

编辑：添加了示例，并修复了current_index拼写错误（camelCase）。

这是另一种增量方式：

current_index = (current_index % 4) + 1;

Answer 5

尝试这个稍微不同的方法，但是我相信你需要它做什么，你也可以在不修改脚本的情况下添加更多步骤，并且不会污染全局命名空间（窗口）

[HTML]

​<div class="step defaultStep">One</div>
<div class="step">Two</div>
<div class="step">Three</div>
<div class="step">Four</div>
<div class="step">Five</div>

[CSS]

.step { display: none; }
.defaultStep { display: block; }​

[JS]

$( function() {
    var steps = $( ".step" );
    var interval = setInterval( function( ) {
        var current = $( ".step" ).filter( ":visible" ), next;
        if( current.next( ).length !== 0 ) {
            next = current.next( );
        } else {
            next = steps.eq(0);
        }
        current.fadeOut( "slow", function( ) {
             next.fadeIn( "slow" );  
        } );
    }, 3000);
} );

Answer 6

也许你也想看一下jquery的循环插件。 在那里你实际上可以实现这种漂亮的过渡 我认为通过一些工作，这将减轻一切。

http://jquery.malsup.com/cycle/

关于你的代码片段。 我认为你可以通过这种方式增强它：

$(document).ready(function() {
    var current_index = 0;

    window.setInterval(function() {
        $("#step_"+ current_index).fadeOut('slow', function() {
            $("#step_" + (current_index + 1)).fadeIn('slow', function() {
                current_index = (current_index + 1) % 4;
            });
        });
    }, 3000);
});

这应该做同样的工作。 当interval函数关闭current_index变量时，它应该在函数内有效。 对不起，如果你不是所有这些闭包的粉丝，但我更喜欢将我想直接执行的函数传递给setInterval函数，而不是在其他地方定义它。

PS请注意，我引入的更改意味着您的#step_ IDs从0开始。