@TheShock17 ноя 2010 в 04:18

После всех асинхронных вызовов

3 мин

8.5K

JavaScript *

+63

114

Комментарии 114

@ifa 17 ноя 2010 в 05:09

А Вы слышали о Reactive Extensions for JS?

@ioffikus 17 ноя 2010 в 05:40

ссылка не работает (

@kirik 17 ноя 2010 в 05:45

хабрапарсер поел букву 'c'

НЛО прилетело и опубликовало эту надпись здесь

@ifa 17 ноя 2010 в 05:44

прошу прощения

Тут

@ifa 17 ноя 2010 в 05:45

Парсер съедает буковку «с» в ссылке.
Вот прямая
channel9.msdn.com/blogs/charles/introducing-rxjs-reactive-extensions-for-javascript

@dzlk 17 ноя 2010 в 06:02

Вы хоть бы писали в одной ветке, через пару десятков сообщений, расстояние между вашими комментариями увеличится и смысловая связь между ними ослабнет

@ifa 17 ноя 2010 в 06:15

Признаю свою ошибку. Жал не ту ссылку.

@Wott 17 ноя 2010 в 06:34

Очень сложно это сделать — описания нет, а нечто напоминающее видео хочет плагин от MS.

@ifa 17 ноя 2010 в 06:51

Вот конкретный пример работы с этой библиотекой
blogs.msdn.com/b/jeffva/archive/2010/03/17/reactive-extensions-for-javascript-the-time-flies-like-an-arrow-sample.aspx

@Wott 17 ноя 2010 в 07:10

Брр, какой-то Prototype поверх jQuery.

@ifa 17 ноя 2010 в 06:54

Ну а тут описание задачи, схожей с темой топика
codebetter.com/blogs/matthew.podwysocki/archive/2010/05/10/introduction-to-the-reactive-extensions-for-javascript-async-method-chaining.aspx

@SowingSadness 17 ноя 2010 в 07:06

Что мешает поставить Silverlight или Moonlight?

@Wott 17 ноя 2010 в 07:11

Я тут пытаюсь Flash снести нафиг. Зачем мне еще одно дырявое тормозилово?

@SowingSadness 17 ноя 2010 в 10:20

Flash я у себя снес, а вот Silverlight оставил — потому что конференции через него смотрю.
А у MS шикарно реализовано передача потокового видео. Он определяет возможности твоего канала и передает видео в том качестве, которое ты можешь принимать, что бы поток не приходилось буферезировать.

html5 такого не даст.

@zw0rk 17 ноя 2010 в 10:57

> html5 такого не даст.

а это и не задача html5. это задача реализации видео в html5.

@zw0rk 17 ноя 2010 в 10:57

в каждом конкретном браузере, есличо.

@SowingSadness 18 ноя 2010 в 07:52

Эм, как это вообще решит это реализация html5?
MS предоставляет решение не только с плагином на клиенте, но и с распределенным ПО на серверах…

и есличо, это не задача реализации видео в html5

@sarlv 18 ноя 2010 в 10:30

а как быть если у человека другая платформа?

@SowingSadness 18 ноя 2010 в 12:23

Какая разница, какая у него платформа? Вы используете клиентскую часть, а она есть под linux, windows, mac os.

Трафик гонится через ближайший для вас медиа-сервер со качеством, которое будет меняться плавно так, что бы вы просматривали потоковое видео без буферизирования.

Например недавняя PDC 2010 использовала это решение. О том, что я пропустил хоть секунды конференции работая через wifi и двигаясь по офисному здания не было и речи. (тут я намекаю, что качество wifi сигнала скакало)

p.s.
привет торрлям которые засрали карму

@sarlv 18 ноя 2010 в 12:58

Кирил, карму твою я не засырал, хотя бы по тому, что сам ее не имею. По теме, html 5 лучшее решение данной проблемы.

@SowingSadness 18 ноя 2010 в 13:03

Ну, я не конкретно вам это написал.

HTML5 тут вообще не при чем.
Какая бы не была реализация тега video — это не поможет, т.к. отдачей потока(контента) занимается серверная часть.

В данном дереве комментариев, я лишь хотел показать, почему я оставляю silverlight(moonlight) в браузере у себя, falsh — как удаляю.

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

@sarlv 18 ноя 2010 в 13:07

ок, привет стереокиллеру :)

@SowingSadness 19 ноя 2010 в 07:50

Я там давно не работаю :)

@bdiang 17 ноя 2010 в 06:00

Данное решение некрасиво на больших количествах колбеков, не лучше ли каунтить сделанный запрос, а при получении колбека каунт декрементировать? Каунт = 0 — тот самый момент. В этом случае не нужно именовать и перечислять колбеки.

@dzlk 17 ноя 2010 в 06:18

Не получится ли так, что не все еще запросы посланы, а предыдущие уже закончились и каунт равен 0?

@barmaley_exe 17 ноя 2010 в 06:23

Можно изначально установить count в количество отправляемых запросов и послать их все (Или не все, некоторые можно отложить).

@dzlk 17 ноя 2010 в 06:28

Да, тоже в итоге пришел к этому решению

@symbix 17 ноя 2010 в 16:43

зашел прочитать этот комментарий :)

@bdiang 17 ноя 2010 в 06:25

Ну теоретически не должно, но для надежности можно задать общее количество запросов.

@Wott 17 ноя 2010 в 06:36

Это немного другая задача. Разница в том решение топик стартера устойчиво к повторениям событий, а ваше — нет.

@bdiang 17 ноя 2010 в 06:41

Да нет, в сабже ясно написано:

Нам надо отправить два асинхронных запроса и обработать их результат только после того, как будет получен результат обоих… Но особенность асинхронных запросов в том, что мы не знаем, какой из них придёт первым

То бишь задача — выполнить определенный колбек, как только получены результаты всех запросов, отправленных асинхронно.

@Wott 17 ноя 2010 в 07:17

И что запросы не могут придти дважды?

@bdiang 17 ноя 2010 в 07:20

И что запросы не могут придти дважды?

Не совсем понял смысл вопроса. На один запрос — один колбек. Вы таки про колбеки спрашиваете, или про запросы?

@Wott 17 ноя 2010 в 07:23

Что не бывает случаев когда событие на которое вешается колбэк случается несколько раз, и соответственно колбэк вызывается не один раз а несколько?

@bdiang 17 ноя 2010 в 07:27

Приведите пример, о каких таких случаях вы говорите?

@Wott 17 ноя 2010 в 07:33

да блин, банально два триггера — один от нажатия мышки на кнопку, второй от клавы на… пусть будет Ctrl.
Но вообще мне надавно пришлось делать перезапросы ajax-ом на сервера потому что там было несколько десятков событий, которые агрегировались в общий запрос на каждый сервер, но нужно было в конце концов получить все.

@bdiang 17 ноя 2010 в 07:38

да блин, банально два триггера — один от нажатия мышки на кнопку, второй от клавы на… пусть будет Ctrl.

Сабж про ajax запросы, а не обработку событий dom.

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

Это частная задача, и решение её будет частным.

@Wott 17 ноя 2010 в 07:42

да? ну не буду спорить :)

@TheShock 17 ноя 2010 в 12:19

Сабж про ajax запросы,

@TheShock 17 ноя 2010 в 12:20

Сабж про асинхронные запросы, а не ajax запросы.
Там есть и запрос к базе и запрос к бд. И это могут быть любые асинхронные запросы, в т.ч. события dom.
Wott прав

@bdiang 17 ноя 2010 в 13:01

Ок, сенькс за пояснение.

@zw0rk 17 ноя 2010 в 07:33

periodicalUpdater любой.

@tenshi 17 ноя 2010 в 08:15

сабжевый способ эту проблему не решает.

@TheShock 17 ноя 2010 в 11:57

решает.

@tenshi 18 ноя 2010 в 08:17

гм, действительно.

@mbezoyan 17 ноя 2010 в 07:44

в данном решении именование колбеков еще влияет на имена аргументов. А как Вы будете запоминать результаты?

@turbo_exe 17 ноя 2010 в 07:45

и каждый раз при добавлении нового запроса, будем исправлять два значения count? тоже не сильно красиво. чтото мне подсказывает, что весь сыр бор здесь ни к чему не приведёт. имхо, нет изящного решения, которое бы устраняло эту проблему. проблема лежит немного глубже — в природе асинхронных запросов, они — асинхронны, а соответственно, мы не должны знать, какой из них придёт первым(по задумке создателей), а всё что мы выдумываем для этого — велосипед…

@TheShock 17 ноя 2010 в 12:09

а в топике мы и не знаем, какой из запросов придёт первым. нам, на самом деле, абсолютно всё равно, какой придёт первым.

@TheShock 17 ноя 2010 в 12:08

изначально я тоже думал сделать на основе каунтера

var process = processFsAndDb.after(2);

asyncFsAccess( file, process);
asyncDbAccess(query, process);

Но вынес именно те недостатки, что назвал Wott:

1. Повторение
Допустим, мы можем ждать повторяющегося события, нажатие кнопок A, B. Тогда пользователь может дважды нажать кнопку A и событие сработает

var process = processFsAndDb.after(2);

onKeyDown('A', process);
onKeyDown('B', process);

Другой вариант — если пользователь нажал «ентер» и данные уже скачаны аджаксом — должна начатся обработка данных.

var process = processFsAndDb.after(2);

onKeyDown('enter', process);
ajax(url, process);

Очевидно, он может дважды нажать ентер, а данные еще не скачены.
На самом деле ситация редкая, но почему бы её не предвидеть, учитывая, что есть еще недостатки

2. Аргументы
Как в этом примере узнать, где ответ от какой функции? args[0] — это ответ asyncFsAccess или asyncDbAccess?

var process = processFsAndDb.after(2);

asyncFsAccess( file, process);
asyncDbAccess(query, process);

3. Читабельность
Со мной, конечно, могут поспорить, но я считаю, что понятнее вторая строка:

var process = processFsAndDb.after(2);
var process = processFsAndDb.after('keyPressed', 'ajaxComplete');

@bdiang 17 ноя 2010 в 13:04

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

@Wott 17 ноя 2010 в 06:39

К сожалению вся красота пропадет если добавить еще валидацию принятых данных…
А так ничего — прикольно.

@TheShock 17 ноя 2010 в 12:18

валидация в processFsAndDb, не?

@Wott 17 ноя 2010 в 13:05

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

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

@TheShock 17 ноя 2010 в 13:17

ну да есть смысл. но это решение универсальное.

@blo 17 ноя 2010 в 07:27

Раз пошла такая пьянка, то думаю стоит упомянуть про Deferred. Выглядело бы примерно так

var fileData;
var dbData;

next(function(){
    return asyncFsAccess(file).next(function(data){fileData = data})
}).
next(function()
    return asyncDbAccess(query).next(function(data){dbData = data})
}).
next(function(){
    return processFsAndDb(fileData, dbData)
})

По поводу Function.prototype.after — мне кажется что после выполнения onReady стоит очищать хеши after и ready.

@bdiang 17 ноя 2010 в 07:29

Чем этот вариант отличается от варианта автора под названием «Фиг с ним, подожду»?

@blo 17 ноя 2010 в 07:36

Как минимум тем что вместо каллбеков цепочки, т.е. код становится более читабельным. Плюс значительно упрощается отлов ошибок через метод .error

...
next(function(){
    return asyncFsAccess(file).next(function(data){fileData = data})
}).
error(function(e){
    console.log(e)
})
...

@bdiang 17 ноя 2010 в 07:42

Только этим и отличается, но сам принцип лучше не становится.

@blo 17 ноя 2010 в 08:08

Как по мне — разница значительна. Если вы намекаете на параллельность запросов — то делается это так:

parallel([
	asyncFsAccess(file),
	asyncDbAccess(query)
]).
error(function(e){
    console.log(e)
}).
next(function (results) {
	processFsAndDb.apply(this, results)
});

@TheShock 17 ноя 2010 в 12:18

В вашем примере asyncFsAccess и asyncDbAccess вызовутся синхронно.

@blo 17 ноя 2010 в 12:29

Как раз нет, в методе parallel к каждой из функций добавится цепочка .next(...).error(...), результаты которых передадутся вниз по цепочке. Тут можно почитать описание.

@TheShock 17 ноя 2010 в 12:37

по-первых, ваша ссылка отвечает мне «Страница, которую вы пытаетесь просмотреть, не может быть показана, так как она использует неверную или неподдерживаемую форму компрессии.»

во-вторых, посмотрите внимательно, что вы написали. asyncFsAccess — это функция, которую вы вызываете, а не передаёте параметром в parallel. то есть в parallel передастся не нужная нам функция, а результат её выполнения.

решение — поступить, как tenshi — биндить аргумент к функции, если вы расширили прототип ф-ции и у вас есть такой метод.

@blo 17 ноя 2010 в 12:51

Надеюсь такая ссылка у вас откроется
https://github.com/cho45/jsdeferred/blob/master/jsdeferred.js#L406

@TheShock 17 ноя 2010 в 12:59

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

@blo 17 ноя 2010 в 14:53

вместо биндения аргументов в deferred используется «самовызов» из callback'a, т.е. как-то так:

parallel([
    (function(){
        var d = Deferred();
        setTimeout(function () {
            d.call('value1');
        }, 100);
        return d;
    })(),
    
    (function(){
        var d = Deferred();
        setTimeout(function () {
            d.call('value2');
        }, 100);
        return d;
    })()
]).
next(function (results) {
	console.log(results);
})

@TheShock 17 ноя 2010 в 15:43

ну… не очень красиво…

@blo 17 ноя 2010 в 15:55

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

@TheShock 17 ноя 2010 в 16:07

а на базу чужих фреймворковв?

@blo 17 ноя 2010 в 16:15

на сколько я знаю — существуют реализации deferred на всех популярных фреймворках, т.е. при подключении этой библиотеки интегрируются как минимум в AJAX.

@blo 17 ноя 2010 в 15:56

function http_get(url) { 
    var d = Deferred();
    var xhr = new XmlHttpRequest();
    xhr.open("GET", url, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState != 4) return;
        if (xhr.status==200){
            d.call(xhr.responseText);
        } else {
            d.fail(xhr.statusText);
        }
    }
    xhr.send(null);
 
    return d;
}

а дальше вполне красиво себе использовать

@blo 17 ноя 2010 в 15:59

елки, второй раз само отправилось…

использовать:

parallel([
    http_get('foo.html'),
    http_get('bar.html')    
]).
next(...)

@KELeborn 8 июл 2015 в 20:09

$.when( $http(url).get(), $http(url2).get() ).then(callback);

@ArtemS 17 ноя 2010 в 07:33

Есть замечательная библиотека Step. С помощью нее ваш код будет выглядит так:

Step( function() { asyncFsAccess(file, this.parallel()); asyncDbAccess(query, this.parallel()); }, function(err, fileData, dbData) { processFsAndDb(fileData, dbData); } ); * This source code was highlighted with Source Code Highlighter.

Удобнее, не находите?

@Wott 17 ноя 2010 в 07:49

Она как раз через counter сделана. Что лично мне кажется недостатком.
Мне та что в топике больше нравиться — можно process.fn() вызывать где угодно, не привязываясь к замыканию. А без оного — все тоже же самое.

@MyraJKee 17 ноя 2010 в 08:08

ИМХО, если не критична скорость, то лучше воспользоваться надежным вариантом… С последовательными вызовами…
В ExtJS Ext.Direct, параллельные асинхронные запросы, при условии что вызываются в определенном интервале времени, отрабатываются на самом деле одним запросом, реализация конечно сокрыта в недрах библиотеки.

@TheShock 17 ноя 2010 в 12:15

чем лучше?) скорость всегда критична.

@tenshi 17 ноя 2010 в 08:10

шаманство какое-то.
лучше так:

Sync()
.thread( asyncFsAccess.bind( file ) )
.thread( asyncDbAccess.bind( query ) )
.finalizer( processFsAndDb )
.run()

asyncFsAccess( file, process['fs']);
asyncDbAccess(query, process['db']);

@turbo_exe 17 ноя 2010 в 08:14

и когда вызывать функцию Sync?

@tenshi 17 ноя 2010 в 08:30

глупый вопрос.

две последние строчки у меня — ненужный артефакт

@turbo_exe 17 ноя 2010 в 08:57

окей, что за метод такой, .thread()?

@tenshi 17 ноя 2010 в 21:22

добавляет асинхронный поток. разве не очевидно?

@MyraJKee 17 ноя 2010 в 08:16

Выглядит красивее. А две последние строчки для чего?

@TheShock 17 ноя 2010 в 12:15

тогда уж можно даже так:

Sync()
  .thread( asyncFsAccess.bind( file ) )
  .thread( asyncDbAccess.bind( query ) )
  .run( processFsAndDb );

@tenshi 17 ноя 2010 в 21:28

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

@TheShock 17 ноя 2010 в 21:30

иногда удобно. думаю, вполне можно сделать и так и так.

@Auru 17 ноя 2010 в 08:17

Async.js умеет. В браузере и на сервере. По цепочке, параллельно, водопадом (когда результат одной асинхронной функции передается на вход следующей) и много еще чего. Для меня лично — самый понятный вариант среди всех async и combo библиотек и подходов. Использую на нескольких проектах, пока не подводил.

@Delfino 17 ноя 2010 в 10:13

мне этого не хватало :) спасибо

@TheShock 17 ноя 2010 в 12:14

хорошая штука

@DnKrozz 17 ноя 2010 в 11:08

Уже с год для программирования сложных анимированных интерфейсов пользую свой простенький класс AfterAll.
Интерфейс:
var after = new AfterAll;
after.addAfterAllCB(function(){$('#screen').hide();});

$('#bar').animate({top: 30}, 1000, after.getCB(function(){$(this).hide()}));
$('#ov').fadeOut(100, after.getCB());

тобишь можно еще калбеки для каждого отдельного действия добавлять.

@slik 17 ноя 2010 в 11:09

Я думаю этот патч не будет принят из-за несовместимости с некоторыми браузерами.

@slik 17 ноя 2010 в 11:10

Ой, не та вкладка, извиняюсь

@TheShock 17 ноя 2010 в 11:11

этот патч совместим со всеми браузерами. точнее не так.
те, кто не использует геттеры и сеттеры — ничего не узнают про этот патч, он на них не повлияет никак. а вот те, кто использует — сможет использовать их и в Мутулз.

@KidsKilla 17 ноя 2010 в 13:14

Ок, а если так? jQuery.one тут только чтобы код был короче

function EventCollector(cb, manyTimes) {
	var q = 0;
	this.add = function( target, evt ){
		++q;
		$(target).one(evt, function( evt ){
			if( --q < 1 ) {
				cb();
			}
		});
		return this;
	};
};

var Obj = new (function(){
	var self = this;
	this.async = function() {
		setTimeout(function(){
			$(self).triggerHandler('async');
		}, 1000);
	};
})();

var evc = new EventCollector(function(){
	alert('all done');
});
evc.add('button', 'click');
evc.add(Obj, 'async');

Obj.async();

@TheShock 17 ноя 2010 в 13:19

простите, не совсем понял ваше предложение.
можете пояснить на примере?

@KidsKilla 17 ноя 2010 в 13:36

Я предлагаю использовать события а не коллбеки.
т.е. это могут быть и нативные события, но в примере я использовал жкверевскую модель.
Это простенький класс с каунтером, который вешает события на объекты, а потом ждёт их все. Вызовом СВОИХ событий занимается каждый объект сам.

Чуть упростил, может так лучше:

function EventCollector(cb, delay) {
	var q = 0;
	function evtDone(){
		if( --q < 1 ) {
			cb();
		}
	}
	this.one = function( target, evt ){
		++q;
		$(target).one(evt, evtDone);
		return this;
	};
	this.delay = function( time ){
		++q;
		setTimeout(evtDone, time);
		return this;
	};
};



var evc = new EventCollector(function(){
	alert('all done');
});
evc.one('button', 'click').delay( 1000 );

@TheShock 17 ноя 2010 в 13:42

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

@TheShock 17 ноя 2010 в 13:42

и продумать его, потому что пока что не очень внятный апи.

НЛО прилетело и опубликовало эту надпись здесь

@blo 17 ноя 2010 в 15:11

т.е. по сути у вас получилась разновидность реализации паттерна Observer?

НЛО прилетело и опубликовало эту надпись здесь

@Ganesh 17 ноя 2010 в 15:07

Как вариант сделать «стек» запросов, который при инициализации заполняется нужными запросами, после чего происходит их асинхронный запуск, после того как на любой из запрос вернулся результат, удалить этот запрос из стека, а после того как стек опустеет вызвать колбек…

@kbi 17 ноя 2010 в 19:37

Самый верный способ — положить на backend скрипт, который может менять в цикле $_POST / $_SERVER['REQUEST_URI'] (если это PHP) и делать нужный include().

А далее всё просто:

queue = new $.queue('id1', '/test/_f1', {'a' : 11});
queue.add('id2', '/test/_f2', {'a' : 12});
queue.add('id3', '/test/_f3', {'a' : 13});
queue.send(
    function(data)
    {
         response1 = data.id1;
         response2 = data.id2;
         response3 = data.id3;

    }
);

бонус: не дёргаем лишний раз сервер

@bur 18 ноя 2010 в 11:17

В варианте «7 раз проверь ++» нет вызова функции process(), лучше поправить.

@TheShock 18 ноя 2010 в 12:55

действительно, спасибо

НЛО прилетело и опубликовало эту надпись здесь

@TheShock 18 ноя 2010 в 14:08

интересно)

@KELeborn 23 июн 2015 в 22:55

А у когото было такое?
TypeError: asyncAbAccess(...) is not a function
хотя весь код данных функций как в примере исполняеят но по окончании ошибка и все дальше код не идет +(

@TheShock 24 июн 2015 в 09:43

asyncDbAccess

@KELeborn 24 июн 2015 в 10:27

суть не в том — я просто поменял букву, суть в тому что после объявления «процесс»

var process = processFsAndDb.after('fs', 'db', "ab");

ни 1 функция уже не работает — точнее так:

function zxc(a){console.log(a)}; zxc(2)
TypeError: zxc(...) is not a function

@TheShock 24 июн 2015 в 17:15

Напишите весь код, пожалуйста)

@KELeborn 24 июн 2015 в 20:43

function asyncFsAccess(a, c){
	console.log(a)
	if (c) c()
};
function asyncDbAccess(b, c){
	console.log(b)
	if (c) c()
};
processFsAndDb = function(){
	console.log("done",arguments);
}

function asd(a){
	console.log(a)
	//if (c) c()
};
function zxc(a){log(a)}
asd(3)
var process = processFsAndDb.after('fs', 'db', "ab");
//asyncFsAccess( 1, process.fs)
//asyncDbAccess( 2, process.db)
zxc(2)

@KELeborn 24 июн 2015 в 22:07

мда, смешно даже както, ошибка была устранена после знака ";" в конце строки вызова первой функции после объявления «process»

zxc(2);

странно както, вдеь должно само автоматом закрывать при компиляции кода…

@KELeborn 24 июн 2015 в 20:42

упс

Зарегистрируйтесь на Хабре, чтобы оставить комментарий