jQuery несколько методов ожидания

Question

Есть ли способ подождать скрытой функции в цикле? Я имею в виду, если у меня есть эта структура в HTML:

<div class='example'> 
    <span> One </span> 
    <span> Two </span> 
    <span> Three </span> 
<div> 

И в JS Я хочу сделать что-то вроде этого:

$('.example span').each(function(i, span) { 
    $(span).hide('slow'); 
}); 

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

Answer 1

Вы можете использовать .delay(), чтобы запустить их в нужное время, как это:

$('.example span').each(function(i, span) { 
    $(span).delay(600 * i).hide('slow'); 
}); 

You can give it a try here

Все, что мы делаем здесь, задерживая следующей анимации 600мс (the "slow" duration) раз это индекс, так что сначала начинается мгновенно (0-основано, 0 * 600 = 0), второе - при 600 мс (первое должно закончиться), третье - при 1200 мс и т. д.

Answer 2

Вы можете call a function, когда скрытая анимация завершена - скрыть го e следующий из этого обратного вызова.

function hideTags() 
{ 
    var tags = $('.post-taglist a'); 
    var len = tags.length; 
    var hide = function(i){ 
    if(i >= len) 
     return; 
    tags.eq(i).hide(1000, function(){hide(i + 1);}); 
    }; 
    hide(0); 
} 

Запустите это с консоли Firebug, чтобы увидеть, как ваши теги исчезают один за другим.

Answer 3

Я использую async.js библиотеку для управления такого рода вещи:

async.forEachSeries($('.example span'), function(span, callback) { 
    $(span).hide('slow', callback); 
});​ 

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

You can try it out here.

Правда, это может быть не стоит включить другую библиотеку только для этого одного вопроса, но если вы столкнетесь с проблемами, заказывающих асинхронные вызовы, такие как анимация и функции Ajax много, то я рекомендую вам взглянуть:)

Вы можете найти async.js library on github

Answer 4

я имел подобную мысль и отправил вопрос о Code Review

My code пошел что-то вроде:

var jParent = jQuery(".parent"); 
jParent.children().reverse().each(function() 
{ 
    var jThis= jQuery(this); 
    // queue puts the function in the normal "fx" queue. This means that the first one will always be fired automatically. 
    jParent.queue(function() 
    { 
     jThis.slideDown(function() 
     {// Dequeue Sets the next one going after the slideDown finishes 
      jParent.dequeue(); 
     }); 

    }); 
}); 

Кто отвечал в ответ, который выглядел как: (упрощенный)

var DURATION = 500; 

.each(function(index){ 
    var jDiv = $(this); 

    jDiv.delay(DURATION * index); 
    // used a variable delay to deal with the timing 
    jDiv.slideDown(DURATION); 
}); 

Лично я думаю, что второй легко understsand но больше вопрос предпочтений, чем все ИМХО.

некоторый свет чтения: .queue() и .dequeue()