Использование задержки с настройкой HTML или текста не работает

У меня странная проблема с функцией задержки, использующей функцию HTML.

Я установил HTML-текст, используя $( '#element').html( 'Hello World');

После установки текста я хочу, чтобы этот текст исчез через 3 секунды.

Итак, в следующей строке я написал:

$('#element').delay( 3000).html( '&nbsp');

Этот не работает, он устанавливает HTML в &nbsp без ожидания 3 секунды, похоже, что jQuery пропускает функцию задержки. Использование этого с fadeOut, например, работает нормально. Я думаю, это как-то связано с задержкой в очереди.

Но почему это не работает. Это довольно просто, подождите 3 секунды, затем запустите функцию HTML.

Ответ 1

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

window.setTimeout(function () {
    $("#element").html('&nbsp;');
}, 3000);

Из http://api.jquery.com/delay/:

jQuery.delay() лучше всего подходит для задержки между обработанными в очереди эффектами jQuery и т.д. и не является заменой для JavaScript native setTimeout, что может быть более подходящим для определенных случаев использования.

Ответ 2

.html() не является функцией очереди. Если вы хотите, чтобы это произошло в очереди анимации, вы должны .queue() самостоятельно, например:

$('#element').delay(3000).queue(function(n) { 
  $(this).html('&nbsp'); n();
});

Если вы не цепляете анимацию или что-то вроде этого, используйте setTimeout() или setInterval() (в зависимости от ситуации), .delay() просто обертка для setTimeout(), и нет причин использовать дополнительный код/сложность, когда нет необходимости.