Как у jQuery есть асинхронные функции?

Question

Я удивлен, что не могу найти четкий ответ на это. Итак, в jQuery вы можете сделать это:

$(someElements).fadeOut(1000);
$(someElements).remove();

Что, запустит анимацию fadeOut, но прежде чем она завершится в течение 1 секунды, элементы удаляются из DOM. Но как это возможно? Я продолжаю читать, что JavaScript является однопоточным (см. Также: Гарантируется ли JavaScript однопоточным? ). Я знаю, что могу сделать либо:

$(someElements).fadeOut(1000).promise().done(function() { 
    $(someElements).remove();
});

или даже лучше:

$(someElements).fadeOut(1000, function() { 
    $(this).remove(); 
});

Чего я не понимаю, так это того, как JavaScript работает в «одном потоке», но я могу использовать эти функции jQuery, которые выполняются асинхронно и визуально видеть изменение DOM в разных местах одновременно. Как это работает? Это не вопрос: «Как мне это исправить».

Answer 1

jQuery-анимации (и почти все анимации на основе javascript) используют таймеры для запуска своих анимаций.Вызов .fadeOut() просто запускает анимацию и не завершается до тех пор, пока через некоторое время не будет выполнена серия операций таймера.

Это все еще однопотоковое..fadeOut() выполняет первый шаг анимации, устанавливает таймер для следующего шага, а затем остальная часть вашего javascript (включая .remove()) работает до завершения.Когда этот поток javascript заканчивается и время для таймера истекает, таймер срабатывает и происходит следующий шаг анимации.Наконец, когда все шаги анимации завершены, jQuery вызывает функцию завершения анимации.Это обратный вызов, который позволяет вам что-то делать после завершения анимации.

Вот как вы решаете эту проблему:

$(someElements).fadeOut(1000, function() {
    $(this).remove();
});

Вы используете функцию завершения анимации и удаляете только элементкогда анимация закончится.

Answer 2

В jQuery есть обработчик setInterval, который выполняет преобразования для всех зарегистрированных свойств анимации.Если вы пришли из as3, подумайте о нем как о обработчике EnterFrame или как о методе Draw в OpenGL

Answer 3

Single Threading не имеет ничего общего с асинхронным программированием.http://social.msdn.microsoft.com/Forums/uk/csharplanguage/thread/3de8670c-49ca-400f-a1dc-ce3a3619357d

Если у вас есть только один поток, в котором вы можете выполнять инструкции, он не будет / всегда / выполняться.Во время этих пустых мест это возможность больше работать.Асинхронное программирование просто разбивает работу на блоки с возможностью повторного ввода, и поток переходит туда, где это необходимо.(Концептуальное объяснение)

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

Answer 4

Во многом так же, как 20 лет назад операционные системы делали многозадачность.Не было никаких потоков, был только список вещей, которые требовали внимания, и контроллер, который бы обращал внимание на вещи, основанные на списке.

Один поток просто перебирает список снова и снова, обслуживая все вещикоторые нуждаются в обслуживании.Единственная разница здесь в том, что с некоторыми вещами связан период ожидания.Они есть в списке, но помечены для обслуживания только после определенного периода.Это очень простая реализация планировщика.Ядро на компьютере делает то же самое.Ваш процессор может выполнять только несколько программ одновременно, и даже тогда, только несколько.Ядро операционной системы должно решить, кто привлекает внимание с точностью до миллисекунды (см. Примеры).«Ядро» или среда выполнения Javascript делает то же самое, но, по сути, работает на ЦП с одним ядром.

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

Answer 5

Вы можете использовать delay() для ожидания определенного времени или использовать обратный вызов для анимации, изменяя fadeOut с animate.jQuery использует setTimeout для анимации и очередей.