Асинхронный итератор

При работе с googlemaps столкнулся с проблемой, когда большое количество маршрутов (более 20) при одновременной отрисовке принеприятно тормозило интерфейс. При это последний firefox тормозил сильнее, чем internet explorer. Для обхода проблемы решил, что если единовременно надо отрисовать больше, чем 15 маршрутов, я буду рисовать их с периодичностью в 50 мс. То есть между вызовами функций отрисовки будет проходит не менее 50мс (gist).
function iterate_async (arr, callback, timeout) {
	var index;

	index = 0;
	(function run () {
		if (index < arr.length) {
			setTimeout(function () {
				callback.call(arr, arr[index], index, arr);
				index += 1;
				run();
			}, timeout || 50);
		}
	}());
}
Из нюансов:
  • первый вызов синхронный
  • this в обработчике ссылается на обрабатываемый массив
  • обработчик получает аргументами элемент массива, индекс обрабатываемого элемента, сам обрабатываемый массив
  • если не указано явное время между вызовами обработчиков, то оно устанавливается в 50мс
И пример вывода элементов списка с вызовом обработчика через каждые 99мс:
var arr = ['masha','nadya', 'elena'];
iterate_async(arr, function (el, index, arr) {
    console.log(el + ' is #' + (index + 1));
}, 500);
Share
Send
Popular