Задержка на 6 секунд до начала функции, которая сама себя зациклит, маленькая, не работает, почему?

Question

Я пытаюсь создать 6-секундную задержку до начала функции heartColor(e), затем функция продолжит цикл. Я не понимаю, почему он запускает функцию сразу, а не ждет 6 секунд, которые он должен, что я сделал не так?

function heartColor(e) {
    e.animate({
        color: '#7ea0dd'
    }, 1000).animate({
        color: '#986db9'
    }, 1000).animate({
        color: '#9fc54e'
    }, 1000, function(){
        heartColor(e)
    })
}

$('.something').hover(function(){
    setTimeout(heartColor($(this)), 6000);
})

Answer 1

Функция setTimeout() ожидает, что ее первый параметр будет функцией reference (или строкой, но это не рекомендуется по нескольким причинам). Вы не передаете ему ссылку на функцию, вы вызываете функцию heartColor() и передаете результат в setTimeout(). Таким образом, функция выполняется немедленно, а затем через шесть секунд ничего не происходит, потому что возвращаемое значение было неопределенным, поэтому setTimeout() не с чем работать.

Попробуйте вместо этого:

$('.something').hover(function(){
    var $this = $(this);
    setTimeout(function() {
      heartColor($this);
    }, 6000);
})

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

setTimeout(heartColor, 6000);

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

var $this = $(this);
function callHeartColor() {
   heartColor($this);
}
setTimeout(callHeartColor, 6000);

Мой первоначальный ответ с анонимной функцией - это своего рода сокращение, и (большинству людей это кажется) более удобным.

Причина, по которой я создал переменную $this, заключается в том, как ключевое слово this работает в JavaScript, что зависит от того, как вызывается функция. Если бы вы просто сказали heartColor($(this)) внутри анонимной функции (или функции callHeartColor()), this не был бы элементом, над которым наведен курсор.

Answer 2

вы вызываете функцию heartColor вместо того, чтобы передавать ее в качестве параметра. Вы должны сделать:

$('.something').hover(function(){
    setTimeout(function(){heartColor($(this))}, 6000);
})

Answer 3

Вы хотите это:

$('.something').hover(function(){
  setTimeout(function() {heartColor($(this));}, 6000);
})