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

我認爲您最後會遇到競爭狀況，因爲嘗試淡化事情的時間間隔以及嘗試淡化事件的回調。對於這種設置，讓淡出回調開始下一輪更有意義。

還使用基於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 2

不是$（function（）{}）;與$（document）.ready（function（）{}）一樣，所以你正在初始化selectNextStep兩次（因此是雙重增量）？

Answer 3

試試這個。簡化一些事情。在下一個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拼錯（駝峯）。

這裏是做增量的另一種方法：

current_index = (current_index % 4) + 1; 

Answer 4

我看不出有任何雙重增量你的代碼是這樣的..

的問題是next變量超出了4值這似乎是極限，並試圖淡化一個不存在的元素。使重置currentIndex的代碼永遠不會執行..

嘗試在http://jsfiddle.net/5zeUF/

Answer 5

增加next變量

實例後加入if (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> 

[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_ ID從0開始。