порядок выполнения javascript

Question

Я начинаю изучать Javascript и jQuery. Я хотел сделать простую слайд-шоу с jQuery, которая отображает список неупорядоченных элементов списка один за другим.

Мой код здесь: on jsfiddle

Я думал, что я хотел бы сделать слайд-шоу с помощью перебора элементов списка в цикле и отображать их с FadeIn и FADEOUT эффекты, как показано ниже:

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

Но он отображает только последний элемент в списке.

Я прочитал, что мне нужно закрыть значение переменной i в отдельной функции из-за области Javascript, которая видит, что значение i увеличивается до 2 в цикле. Итак, я сделал отдельную функцию, которая закрывает значение i и вызывает функцию. Но он был тем же самым, отображая последний элемент списка.

Итак, я просто хотел попробовать без петли, сделав два отдельных эффектов на элементах списка, как показано ниже:

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

Но это не отображает элементы списка последовательно, как написано выше. Когда вы запускаете код, кажется, что первый элемент отображается очень быстро, и последний элемент отображается по назначению.

Я написал это как код C или Java, считая, что он будет выполняться сверху донизу. Но похоже, что Javascript отличается, и я не понял ключевой концепции Javascript.

Итак, мой вопрос в том, почему он не отображает элементы списка по порядку и отображает только последний элемент, и что мне нужно знать, чтобы он работал как намеренный.

спасибо.

Answer 1

С причин, почему ваш не работали уже освещались, а я создал новый 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 

Answer 2

Анимации реализованы за кулисами, используя множество инкрементных вызовов setTimeout()/setInterval(), которые в основном просто ставят очередные задачи. Таким образом, фактические вызовы функций, которые вы сделали в вашем коде, не являются синхронными операциями, все они завершены в течение микросекунды, и многие будущие задачи были выставлены в очередь.

Это показывает, что это немного лучше, вторая анимация планируется начать достаточно далеко в будущем, чтобы не мешать.

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

Я не делаю много анимации в JQuery, но я знаю, что некоторые анимационные функции принимают функцию в качестве аргумента, которая будет вызвана, как только это анимация заканчивается. Это облегчает выполнение серийных анимаций, потому что вам не нужно делать расчеты времени/математики.

Что касается того, почему это делается, как это: javascript является однопоточным, а синхронные операции, которые не завершаются быстро, могут легко блокировать ui. Итак, вы должны выманить его и поставить в очередь, что браузер делает на своем листе.

Answer 3

Гораздо более простой метод будет

$(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, то значение п «1-индексированный»