javascript執行順序

我開始學習Javascript和jQuery。我想用jQuery做一個簡單的幻燈片放映，它會逐個顯示列表無序列表項目。javascript執行順序

我的代碼是在這裏：on jsfiddle

我以爲我會通過遍歷列表項的for循環進行幻燈片放映，並與淡入淡出和效果，如下面顯示出來：

for(var i = 0; i < 3; i++) 
{ 
    $('#slider li:nth-child('+ i +')') 
     .fadeIn() 
     .delay(1000) 
     .fadeOut(); 
}

但它只顯示列表中的最後一項。

我讀到我需要在一個單獨的函數中關閉i變量的值，因爲它看到在循環中i的值增加到2。所以，我做了一個單獨的函數，它關閉了i的值並調用函數。但它仍然是一樣的，顯示列表的最後一項。

所以，我只是想通過生成類似下面的列表項的兩個獨立的效果，而無需環路嘗試：

$('#slider li:first-child') 
    .fadeIn() 
    .delay(1000) 
    .fadeOut(); 
$('#slider li:nth-child(2)') 
    .fadeIn() 
    .delay(1000) 
    .fadeOut();

但是就像上面寫的不按順序顯示列表項。運行代碼時，看起來第一個項目顯示得非常快，最後一個項目按預期顯示。

我寫它像一個C或Java代碼，認爲它會從上到下執行。但它看起來像Javascript是不同的，我不明白一個關鍵的Javascript概念。

所以，我的問題是爲什麼它不按順序顯示列表項目，只顯示最後一個項目，我應該知道什麼才能使它按照預期工作。

謝謝。

來源

2011-01-19 Ari

謝謝大家的答案！ – Ari 2011-01-24 01:32:02

既然爲什麼你沒有工作的原因已被覆蓋，而不是我爲你設置一個新的fiddle用下面的工作幻燈片代碼和註釋說明：

$('#slider li').hide(); 

// Method 3 
var slideIt = function (which) { 
    $('#slider li:nth-child('+ which +')') 
     .fadeIn(300) 
     .delay(1000) 
     .fadeOut(300, function() { // after animation complete 
      which++; // increment which child 
      which = (which > $('#slider li').length) ? 
        1 : // if last child loop back to beginning 
        which; 
      slideIt(which); // call again with new child 
     }); 
}; 

slideIt(1); // start the process

來源

2011-01-19 06:24:15 mVChr

動畫是通過對setTimeout（）/ setInterval（）進行多次增量調用而實現的，後者基本上只是爲將來的任務排隊。因此，您在代碼中所做的實際函數調用不是同步操作，它在1微秒內完成，並且許多未來任務都已排隊。

這顯示它好一點，第二個動畫被安排在未來啓動足夠遠，以免干擾。

for(var i = 0; i < 3; i++) 
{ 
    $('#slider li:nth-child('+ i +')') 
     .delay(2000 * i) 
     .fadeIn() 
     .delay(1000) 
     .fadeOut(); 
}

我沒有做很多動畫jQuery的，但我知道，一些動畫函數接受一個函數作爲參數，一旦它的動畫完成，這將被調用。這使得更容易做連續動畫，因爲你不需要做時間/數學計算的詭計。

至於爲什麼它是這樣做的 - JavaScript是單線程的，同步操作不能很快完成可以很容易地阻止用戶界面。所以你必須把它搞糊塗，排列起來，這是瀏覽器在其中的作用。

來源

2011-01-19 05:54:41 goat

一個更簡單的方法將是

$(document).ready(function() { 
    $('#slider li:gt(0)').hide(); 
    setInterval(
     function() { 
      $('#slider li:first-child') 
       .fadeOut() 
       .next('li') 
       .fadeIn() 
       .end() 
       .appendTo('#slider'); 
     } 
    , 3000); 
});

它使用JavaScript SetInterval方法。

您可以view the code in action here

P.S：jQuery的執行:nth-child(n)嚴格從CSS規範衍生，n的值爲「1索引」

來源

2011-01-19 06:50:30 naveen

javascript執行順序

回答

相關問題