Почему .delay() не работает?

Question

Я хочу установить это значение one, а затем через 5 секунд это значение two - div. Как я могу это сделать?

Вот что я пытался, но я не знаю, почему он не работает:

$('div').html('one').delay(5000).html('two'); 

Answer 1

Проблема с setTimeout что он ломает хороший Jquery цепочки. Вы можете сохранить код свободно, обернув немедленную функцию queue вызовов:

$('div') 
 
    .queue(function() { 
 
    $(this).html('one').dequeue(); 
 
    }) 
 
    .delay(2000) 
 
    .queue(function() { 
 
    $(this).html('two').dequeue(); 
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div></div>

Вы даже можете добавить небольшой «плагин», чтобы уменьшить подробность:

$.fn.queued = function(meth) { 
    var args = [].slice.call(arguments, 1), 
     $$ = $(this); 
    return this.queue(function() { 
    $$[meth].apply($$, args).dequeue(); 
    }); 
} 

и затем:

$('div') 
    .queued('html', 'one') 
    .delay(2000) 
    .queued('html', 'two') 

Answer 2

Может быть, это поможет вам?

$('div').html('one'); 

setTimeout(function(){ 
     $('div').html('two'); 
}, 5000); 

Answer 3

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

Согласно JQuery документации:

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

Таким образом, ваш код будет выглядеть следующим образом:

var temp = $('div').html('one'); 

setTimeout(function(){temp.html('two');}, 5000);