Question

我有一个简单的javascript / jquery函数（淡出一个div，淡入另一个...循环，直到达到最大值，然后从开始回来。我遇到的问题是fadein下一个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

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

示例： 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函数，而不是在其他地方定义它。

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

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

6 个答案: