Отложенные вычисления в JavaScript

[Kolyaj]

Ещё одна серия статей, на этот раз про отложенные вычисления. Описал, правда, не всё, что хотел, пара паттернов у самого ещё не уложились в голове.

В процессе написания сделал для себя небольшое (а может даже большое) открытие.

IE устанавливает таймер на следующий запуск после выполнения callback-функции, а остальные браузеры — до. Поэтому, например, анимация, реализованная с помощью setInterval в Internet Explorer всегда будет медленнее, чем в других браузерах.

[рони]

мысли в слух ...

function f() {
var a = 1;
setTimeout('alert(a)', 2000); // Через две секунды будет ошибка,
// т.к. a не определена в глобальной области видимости.
}

но можно веть так написать

function f() {
    var a = 1;
    setTimeout('alert('+a+')', 2000);
}
f();

и тогда ошибки не будет.

[Kolyaj]

Можно, если только a -- значение примитивного типа.

[subzey]

http://alljs.ru/articles/timeout/overview.html

setTimeout(function() {…}, 1); // Ставим минимально возможный интервал

Минимально возможный интервал — 0. Код ставится в очередь, и выполнится по окончанию блока <script> (или каскада событий и обработчиков событий, в общем, «потока»).

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

<a href="javascript:writeLog('click default action')" id="test">Клицк ми!</a>
<pre id="log"></pre>
<script>
	setTimeout(function(){
		writeLog("Log started"); /* а функция-то еще не определена! */
	}, 0)
	writeLog = function(str){
		document.getElementById('log').innerHTML += str + "<br />";
	};
	test = document.getElementById("test");
	test.onclick = function(){
		writeLog('click event handler');
		setTimeout(function(){
			writeLog('timeout at click');
		}, 0)
	}
	test.onmouseup = function(){
		writeLog('mouseup event handler');
		setTimeout(function(){
			writeLog('timeout at mouseup');
		}, 0)
	}
</script>

А в IE setTimeout(…, 1) рискует превратиться в setTimeout(…, 18.2) из-за квантов таймера.

[Kolyaj]

subzey,
http://alljs.ru/articles/timeout/fast-settimeout.html

В первом тесте меняю

setTimeout(arguments.callee, 1);

на

setTimeout(arguments.callee, 0);

Показания не изменяются.

[subzey]

Хм, похоже на то.

Кстати, спасибо за эту тему, побенчмаркал Оперу 10.6 (Win) и получил странные результаты

var startTime = (new Date).getTime();
	var i=0;
	(function(){
		if (++i>100){
			alert((new Date).getTime() - startTime);
		} else {
			setTimeout(arguments.callee, 1E-80);
		};
	})()

Работает значительно быстрее, чем

var startTime = (new Date).getTime();
	var i=0;
	(function(){
		if (++i>100){
			alert((new Date).getTime() - startTime);
		} else {
			setTimeout(arguments.callee, 0);
		};
	})()

Подтвердите, или опревергните, плз.

[Kolyaj]

setZeroTimeout всё равно быстрее

[Octane]

setTimeout(function (a, b, c) { alert([a, b, c]); }, 10, "A", "B", "C")

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

[Kolyaj]

Octane,
вобщем использовать это нельзя Хотя упомянуть стоит.

[x-yuri]

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

foo.of(this).pass(1, 2).defer(100);

вместо

foo.defer(100, this, [1, 2]);

В результате не надо помнить порядок аргументов (по сути получаем именованные аргументы) и не надо пихать эти ctx, args во все остальные функции. Да и просто, у defer как-то многовато обязанностей иначе


По поводу

(function() {
    // Выполняем периодические действия

    setTimeout(arguments.callee, 500);
})();

можно добавить еще один метод, например, periodical и писать как-нибудь вроде

onTimer.periodical(500)();

Как передать в onTimer информацию - см. выше. Помимо вынесения "служебного" кода, передаваемые переменные будут явно обозначены (в отличие от варианта с замыканием)

пара паттернов у самого ещё не уложились в голове

а что за паттерны?


offtopic: код выглядит контрастно на фоне основного текста...