Javascript，变量的本地复制'；s值。。。努力实现它

我有一个简单的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 ++;
        });
    });
}

---

是不是$（function（）{}）；与$（document）相同。就绪（function（）{}），所以您要初始化selectNextStep两次（因此是双倍增量）？

试试这个。稍微简化一些。在下一个

fadeIn（）

之前增加（并重置）当前的

索引

示例：

EDIT:添加了示例，并修复了我对
当前索引的拼写错误（camelCase）

下面是另一种进行增量的方法：

current_index = (current_index % 4) + 1;

我看不到任何双增量的方式，你的代码是

问题是
next
变量超出了似乎是限制的4值，并试图在不存在的元素中衰减。因此重置
currentIndex
的代码永远不会执行

增加
next
变量后，如果（next>4）next=1，尝试添加

示例在
尝试一下这个稍微不同的方法，但我相信它能满足您的需要，而且您可以在不修改脚本的情况下添加更多步骤，并且不会污染全局名称空间（窗口）

[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>

[JS]

也许你还想看看jquery的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);
});

这应该做完全相同的工作。由于间隔函数在当前_索引变量上关闭，因此它在函数内部应该是有效的。对不起，如果您不喜欢所有这些关闭，但我更喜欢将我要执行的函数直接传递给setInterval函数，而不是在其他任何地方定义它

请注意，我介绍的更改意味着您的“步骤ID”从0开始。
我认为由于间隔尝试淡入，而回调尝试淡出，您将面临竞争条件。对于这种设置，让淡入回调开始下一轮更有意义

此外，使用基于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);
        });

    });
}

演示：
不，这不是问题所在，双包装是不必要的，但不会导致代码执行两次。您可以在这里进行测试：我只是在寻找悬而未决的结果。JSFIDLE非常好，谢谢。关于将全局变量复制到局部范围的问题，在您的代码中是局部“下一步”变量采用全局“current_index”变量的值，而不是其指针，因此您可以安全地修改“next”变量。只有直接赋值到“current_index”才能修改全局变量。您的if语句在else之前有分号，请先删除该分号。我看不到“current_index”的任何其他位置如果正在分配一个值，则由于某种原因，回调可能会被调用两次。
$( 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);
} );

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

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

    });
}