Очередность выполнения функции и кода?

Question

[svoyak]

Привет, хабр.

Есть простая функция, которая добавляет элемент в DOM, например такая:

function add_to_DOM() {<br>
    $('body').append('<div id="asd"></div>');<br>
}<br>

Т.к. время изменения в структуре DOM-а зависит от процессора и от браузера, эмулируем это так:

function add_to_DOM() {<br>
    setTimeout(function(){<br>
        $('body').append('<div id="asd"></div>');<br>
    }, 500);<br>
}<br>

Теперь сам вопрос. Как заставить alert, выполняться только после полной отработки функции, без обертки его в setTimeout?

$('button').click(function(){<br>
    add_to_DOM();<br>
    alert($('#asd').attr('id'));<br>
});<br>

Можно ли как-то использовать jQuery.queue для кастомных функций?

Заранее благодарен.

Answer 1

[Виталий Перетятько]

Вставка элементов в DOM работает синхронно, ваш алерт всегда будет выполняться только после того, как элемент вставлен.

Comments

[Виталий Перетятько]

Естественно если вы уберете setTimeout которым вы «эмулируете задержки»

[svoyak]

Увы, но это не так. В проекте мне приходилось оборачивать «alert» в setTimeout, чтобы достичь нужного результата.

[Виталий Перетятько]

Незнаю что вам там приходилось добавлять, но элементы добавляются синхронно. Если посмотреть внуть append() там где то будет функция appendChild() она возвращает ссылку на добавленный элемент, который тут же можно дальше использовать в коде. Так что они 100% работают синхронно. если у ваш скрипт не работает — проблема в другом, думайте. Возможно ваша функция загружает асинхронно контент который вставляется через AJAX.

Answer 2

[Anton Bobylev]

Ну, то что вам приходилось по какой-то причине лепить костыли еще не значит, что манипуляции с DOM происходят асинхронно, FYI:
stackoverflow.com/a/2035662
stackoverflow.com/a/7678000
stackoverflow.com/a/5085535

Comments

[svoyak]

Спасибо, буду искать где косяк.

Answer 3

[Vitaliy Petrychuk]

function add_to_DOM() {
	setTimeout(function(){
		$('body').append('<div id="asd">dasdasdasdsad</div>').trigger('asd_added');
	}, 500);
}
$('button').click(function(){
	add_to_DOM();
	$('body').on('asd_added', function() {
		alert($('#asd').attr('id'));
	})
});

Comments

[svoyak]

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

[Vitaliy Petrychuk]

В таком случае другого решения кроме как использовать setTimeout нет.
1) запускать alert после 500 мсек
2) запускать каждые N мсек проверку на наличие елемента в DOM ($('#asd').length) и тогда запускать alert