Pull to refresh

Использование Deferred объектов в jQuery 1.5

Reading time 6 min
Views 37K
jQuery *
Translation
Deferred объекты появились в jQuery 1.5. Они позволяют отделить логику, которая зависит от результатов выполнения действия от самого действия. Для JavaScript Deferred объекты не новы, они уже были в MochiKit и Dojo, но с изменениями логики jQuery ajax от Julian Aubourg, внедрение Deferred объектов было неминуемо. С Deferred объектами несколько callback могут быть связаны с результатом задачи и любые из них могут быть привязаны к действию даже после начала его выполнения. Выполняемая задача может быть асинхронна, но не обязательно.

Deferred объекты теперь встроены в $.ajax() таким образом вы будете получать их автоматически. Обработчики теперь могут быть связаны с результатом следующим образом:
// $.get, ajax запрос, он асинхронный по умолчанию
var req = $.get('foo.htm')
   .success(function( response ){
      // что-нибудь делаем с ответом
   })
   .error(function(){
      // делаем что-нибудь если запрос провалился
   });
 
// это выполнится перед тем как $.get() будет выполнено
doSomethingAwesome();
 
// Делаем что-то ещё перед завершением запроса
req.success(function( response ){
   // делаем  что-то ещё с ответом
   // он будет выполнен когда запрос завершится, а если запрос завершен, то будет вызван немедленно
   // если запрос уже был выполнен
});

Читать дальше →
Total votes 116: ↑113 and ↓3 +110
Comments 19

Асинхронные API и объект Deferred в деталях

Reading time 11 min
Views 20K
JavaScript *Node.JS *
Tutorial
Sandbox
Большинство современных языков программирования позволяют использовать асинхронно выполняемые блоки кода. Вместе с гибкостью, получаемой при использовании асинхронного подхода, рискнувший его применить также получает более сложный для понимания и поддержки код. Однако, любое усложнение, с которым сталкиваются программисты, как правило, находит практическое решение в виде нового подхода или повышения уровня абстракции. В случае асинхронного программирования таким средством служит объект типа отложенный результат или deferred (англ. deferred — отложенный, отсроченный).

В статье будет рассказано о базовых подходах к возврату асинхронных результатов, функциях обратного вызова, объектах deferred и их возможностях. Будут приведены примеры на языке JavaScript, а также произведён разбор типового объекта deferred. Статья будет полезна программистам, начинающим постигать асинхронное программирование, а также знакомым с ним, но не владеющим объектом deferred.
Окунуться в мир асинхронного программирования
Total votes 21: ↑17 and ↓4 +13
Comments 15

Исследуем JavaScript Generators

Reading time 9 min
Views 43K
Website development *JavaScript *Node.JS *
Tutorial
Translation


Когда я начинал писать на node.js, я ненавидел две вещи: все популярные шаблонизаторы и огромное количество callbacks. Я добровольно использовал callbacks, потому что понимал всю силу событийно-ориентированных серверов, но с тех пор в JavaScript появились генераторы, и я с нетерпением жду день, когда они будут имплементированы.

И вот этот день наступает. На сегодня генераторы доступны в V8 и SpiderMonkey, имплементация следует за обновлениями спецификации — это заря новой эры!
Читать дальше →
Total votes 54: ↑49 and ↓5 +44
Comments 17

Ещё раз о Deferred/Promise

Reading time 7 min
Views 76K
JavaScript *Programming *jQuery *CoffeeScript *
Tutorial
DeferredТак получилось, что последние несколько недель очень часто приходилось слышать слова Promise и Deferred от разных людей. Как правило, этими понятиями оперируют уже повидавшие виды разработчики, столкнувшиеся в своей деятельности с определенными задачами.

Как я могу судить, для людей, которые на практике не столкнулись с некоторыми специфическими проблемами, эти 2 понятия являются довольно трудными для понимания. И не потому, что понятия Promise и Deferred являются с чем-то сложным, а потому, что довольно непросто сходу выдумать подходящую задачу, чтобы попробовать Deferred objects (в JQuery и не только) в действии.

Да, вероятно для тех, кто знаком с этим вопросом он покажется пустяковым и не стоящим и выеденного яйца. Кроме того, вопрос уже многократно обсуждался. Однако, я наберусь смелости еще раз его затронуть и вот почему: 1) Мне кажется, что для некоторых читателей этот пост может оказаться интересным. 2) Я пойду от практики, а не от теории. Моя задача — продемонстрировать работу инструмента. Теорию и другие варианты применения при необходимости вы найдете в ссылках к посту.

Ниже я попробую показать вам что Promise и Deferred это очень и очень просто. Кроме того, для объяснения этой темы, мне придётся затронуть еще несколько интересных моментов JavaScript.

Читать дальше →
Total votes 43: ↑31 and ↓12 +19
Comments 28

Управление JavaScript UI-потоком с помощью планировщика WinJS

Reading time 15 min
Views 3.4K
Microsoft corporate blog JavaScript *HTML *
Translation
От переводчика: в статье рассказывается о новом планировщике задач в библиотеке WinJS 2.0, обновившейся вместе с выходом Windows 8.1. Для понимания части материала крайне желательно понимание работы с отложенными результатами (Promise). См. раздел MSDN, посвященный асинхронному программированию на JavaScript.

Не считая рабочих веб-процессов (web workers) и фоновых задач, которые также выполняются как отдельные веб-процессы, весь JavaScript-код в приложениях для Windows Store выполняется в общем так называемом UI-потоке. Этот код может делать асинхронные вызовы WinRT API, которые выполняют свои операции в отдельных потоках, но есть один важный момент, о котором нужно помнить: результаты из этих не-UI-потоков возвращаются назад для обработки в UI-поток. Это означает, что запуск серии асинхронных вызовов WinRT (например, HTTP-запросов), — всех сразу, — может потенциально перегрузить UI-поток, если результаты от них придут примерно в одно и то же время. Более того, если вы (или WinJS) добавляете элементы в DOM или изменяете стили, которые требуют обновления компоновки страницы в UI-потоке, это создает еще больше задач, конкурирующих за ресурсы CPU. Как результат ваше приложение становится «тормозящим» и неотзывчивым.

В Windows 8 приложение может предпринять ряд шагов для снижения таких эффектов, например, запускать асинхронные операции в рамках временных блоков, чтобы управлять частотой возвратов в UI-поток, или объединять вместе задачи, требующие цикла обновления страницы, чтобы за один проход выполнялось больше операций. Начиная с Windows 8.1, появилась возможность асинхронно расставлять приоритеты разным задачам непосредственно в UI-потоке.

Читать дальше →
Total votes 15: ↑13 and ↓2 +11
Comments 1

Размышления о стандартной библиотеке JavaScript. Core.js

Reading time 64 min
Views 100K
Website development *JavaScript *Node.JS *
Один пацан писал все на JavaScript, и клиент, и сервер, говорил что нравится, удобно, читабельно. Потом его в дурку забрали, конечно.
— С просторов интернета

К чему это я? Занятная штука — JavaScript. Основа современного web и на фронтэнде альтернатив как таковых не имеет.

JavaScript это, в том числе, и стандартная библиотека, о которой здесь и пойдёт речь. Под стандартной библиотекой я подразумеваю модули, конструкторы, методы, что должны присутствовать на любой платформе, будь то браузер или сервер, без лишних действий со стороны программиста, не включая API, специфичный для платформы. Даже если вы пишите не на JavaScript, а на языке в него компилируемом, скорее всего, вам придется иметь дело с его стандартной библиотекой.

Ванильная стандартная библиотека JavaScript, в целом, неплоха. Это не только стандартная библиотека по спецификации языка ECMA-262 актуальных версий — от 3 до черновика 6. Часть API вынесена в отдельные спецификации, например, API интернационализации ECMA-402. Многие возможности, без которых сложно представить JavaScript, например, setTimeout, относятся к web-стандартам. Консоль не стандартизована вовсе — приходится полагаться на стандарт де-факто.

Вот только не такая уж она и стандартная — везде разная. Есть старые IE, в которых из коробки мы получаем стандартную библиотеку ES3 90-бородатого года даже без Array#forEach, Function#bind, Object.create и консоли, и есть, например, Node.js, на которой многие уже вовсю используют возможности грядущего ES6.

Хочется иметь универсальную, действительно стандартную библиотеку, как на сервере, так и в любом браузере, максимально соответствующую современным стандартам, а также реализующую необходимый функционал, что (пока?) не стандартизован. Статья посвящена библиотеке core.js — реализация моих соображений по поводу стандартной библиотеки JavaScript. Кроме того, эта статья еще и шпаргалка по современной стандартизованной стандартной библиотеке JavaScript и заметки о её перспективах.

Содержание, или что получим на выходе:


Читать дальше →
Total votes 87: ↑82 and ↓5 +77
Comments 40

Скрещиваем WebWorker и Promise

Reading time 2 min
Views 5.4K
JavaScript *
Если уж есть необходимость скрещивать WebWorker с XMLHttpRequest, то пора бы скрестить его с любой функцией, а заодно разобраться с обещаниями ES6.

Цель — научиться делать вот так:
new PromiseWorker(array => array.sort()).Invoke([3,2,1]).then(result => console.log(result));
(Здесь и далее используются arrow functions для краткости)

Читать дальше →
Total votes 5: ↑4 and ↓1 +3
Comments 6

Давать обещания – это ювелирное искусство

Reading time 11 min
Views 8.4K
JavaScript *Node.JS *
Sandbox
Статья написана для ювелиров, которым в силу роста популярности бижутерии пришлось оставить свою работу и заняться другим делом немного смежным с их предыдущим.
Читать дальше →
Total votes 20: ↑7 and ↓13 -6
Comments 13

У нас проблемы с промисами

Reading time 16 min
Views 218K
VK corporate blog Website development *JavaScript *Node.JS *
Translation
Разрешите представить вам перевод статьи Нолана Лоусона «У нас проблемы с промисами», одной из лучших по теме из тех, что мне доводилось читать.

У нас проблемы с промисами


Дорогие JavaScript разработчики, настал момент признать это — у нас проблемы с промисами.

Нет, не с самими промисами. Их реализация по спецификации A+ превосходна. Основная проблема, которая сама предстала передо мной за годы наблюдений за тем, как многие программисты борются с богатыми на промисы API, заключается в следующем:

— Многие из нас используют промисы без действительного их понимания.

Если вы мне не верите, решите такую задачку:

Вопрос: В чем разница между этими четырьмя вариантами использования промисов?

doSomething().then(function () {
  return doSomethingElse();
});

doSomething().then(function () {
  doSomethingElse();
});

doSomething().then(doSomethingElse());

doSomething().then(doSomethingElse);

Узнайте решение задачи
Total votes 139: ↑136 and ↓3 +133
Comments 121

Упрощение асинхронного кода на JavaScript с внедрением асинхронных функций из ES2016

Reading time 6 min
Views 20K
Microsoft corporate blog JavaScript *Microsoft Edge
Translation
Хотя мы еще продолжаем работу над внедрением поддержки ES6/2015, команда Chackra также смотрит за пределы ES2016 и, в частности, на асинхронные функции. Мы рады объявить об экспериментальной поддержке async-функций в Microsoft Edge, начиная со сборки Microsoft Edge (EdgeHTML 13.10547).


Читать дальше →
Total votes 26: ↑21 and ↓5 +16
Comments 18

Реализации setImmediate: сообщения, мутация или обещания, что быстрее?

Reading time 6 min
Views 11K
Website development *JavaScript *
Recovery mode


Доброго времени суток, %username%! Маленькое исследование на тему «какой же способ поставить функцию/метод на обработку в очередь эффективнее» и, как результат, сравнительный тест, и итоговая реализация схожей с setImmediate функции. Этот метод нужен тем, кто хочет разбивать выполнение скрипта, чтобы тот не «подвешивал» браузер, что бывает полезно при огромном скрипте инициализации, разборе большого массива данных, построения сложной структуры не прибегая к WebWorkers.

Для понимания: setImmediate это метод объекта window, который должен вызвать функцию, переданную в неё, асинхронно, эдакий setTimeout(fn, 0), где 0 реально 0, а не минимум 4. Для nodejs-программистов это process.nextTick. Т.к. сам метод (setImmediate) имеет чёткий стандарт с ошибками и дополнительными параметрами, рассмотрим абстрактную задачу асинхронного выполнения переданной функции/метода как можно быстрее.

Исследования исключительно в рамках сценариев браузера, при чём основных, т.к. в работниках (workers) не совсем понятно зачем такое дробление, хотя если нужно, можно попробовать обещания и сообщения.

Итак, давайте узнаем, что же лучше подходит: postMessage, MutationObserver или Promise?
Познаём
Total votes 13: ↑12 and ↓1 +11
Comments 9

Fallback-действия в ES6 Promise

Reading time 4 min
Views 17K
JavaScript *HTML *
Всем доброго времени суток!

Началось всё с того, что в качестве тестового задания на собеседованиях, я начал просить соискателей реализовать предзагрузчик картинок на JS. Помимо самой предзагрузки, скрипт должен был уметь подставлять fallback-картинку, если нужная картинка не могла быть загружена. Обязательным условием было — использование ES6 Promise.
Затем я подумал: «А почему бы самому не реализовать такой предзагрузчик и не выложить в общее пользование? Да это же еще и отличный повод написать статью на Хабр!».
Собственно, под катом описание логики работы такого предзагрузчика + ссылка на сам предзагрузчик.
Читать дальше →
Total votes 17: ↑11 and ↓6 +5
Comments 46

Проверяем скорость работы промисов

Reading time 2 min
Views 11K
JavaScript *Node.JS *
Sandbox
В этой статье решил выложить довольно интересные, на мой взгляд, результаты бенчмарка собственного производства. Данный бенчмарк создан с целью выяснить скорость работы нативных и bluebird-промисов.

image

Читать дальше →
Total votes 30: ↑26 and ↓4 +22
Comments 27

Promises 101

Reading time 4 min
Views 25K
JavaScript *
Sandbox

Перевод первой части отличной статьи про промисы. Базовые приемы создания и управления промисами.


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


Читать дальше →
Total votes 29: ↑26 and ↓3 +23
Comments 50

Двусторонний binding данных с ECMAScript-2015 без Proxy

Reading time 8 min
Views 8.9K
Website development *JavaScript *HTML *
Sandbox
Привет, уважаемые читатели Хабра. Эта статья некое противопоставление недавно прочитанной мной статье «Односторонний binding данных с ECMAScript-2015 Proxy». Если вам интересно узнать, как же сделать двусторонний асинхронный биндинг без лишних структур в виде Proxy, то прошу под кат.
Читать дальше →
Total votes 21: ↑18 and ↓3 +15
Comments 14

Путеводитель по JavaScript Promise для новичков

Reading time 7 min
Views 134K
ZeroTech corporate blog Ajax *Website development *JavaScript *
Tutorial
image

Этот материал мы подготовили для JavaScript-программистов, которые только начинают разбираться с «Promise». Обещания (promises) в JavaScript – это новый инструмент для работы с отложенными или асинхронными вычислениями, добавленный в ECMAScript 2015 (6-я версия ECMA-262).
Читать дальше →
Total votes 14: ↑14 and ↓0 +14
Comments 61

Async/await это шаг назад для JavaScript'a?

Reading time 5 min
Views 44K
JavaScript *Node.JS *
Translation


В конце 2015 года я услышал об этой паре ключевых слов, которые ворвались в мир JavaScript, чтобы спасти нас от promise chain hell, который, в свою очередь, должен был спасти нас от callback hell. Давайте посмотрим несколько примеров, чтобы понять, как мы дошли до async/await.
Читать дальше →
Total votes 70: ↑46 and ↓24 +22
Comments 115

Очередная node.js-библиотека…

Reading time 4 min
Views 16K
Node.JS *
Sandbox

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


Все началось примерно 6 лет назад, когда я познакомился с node.js. Около 3 лет назад я начал использовать node.js на проектах вместе с замечательной библиотекой express.js (на wiki она названа каркасом приложений, хотя некоторые могут называть express фреймворком или даже пакетом). Express сочетает в себе node.js http сервер и систему промежуточного ПО, созданную по образу каркаса Sinatra из Ruby.

Читать дальше →
Total votes 29: ↑22 and ↓7 +15
Comments 40

Асинхронные функции 101

Reading time 4 min
Views 26K
JavaScript *
Translation

Одним из основных преимуществ JavaScript является то, что всё асинхронно. По большей части различные части вашего кода не влияют на выполнение других.


doALongThing(() => console.log("I will be logged second!"));  
console.log("I will be logged first!");  

К сожалению, это также один из основных недостатков JavaScript. Задача выполнения синхронного кода становится сложнее, так как по умолчанию всё асинхронно.

Читать дальше →
Total votes 18: ↑12 and ↓6 +6
Comments 32