在开始一个会自行循环的函数之前延迟 6 秒，很小，不起作用，为什么？

Question

我试图在 heartColor(e) 函数开始之前创建 6 秒的延迟，然后该函数将继续循环。我不明白为什么它立即启动该功能，而不是等待它应该等待的 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() 函数期望其第一个参数是函数引用（或字符串，但出于多种原因不建议这样做）。您没有向其传递函数引用，而是调用 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 中的工作方式，这取决于函数的调用方式。如果您只是在匿名函数（或 callHeartColor() 函数）内说 heartColor($(this)) this 则不会是该元素被悬停在上面。

Answer 2

您正在调用函数 heartColor 而不是将其作为参数传递。你必须做：

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

Answer 3

你想要这个：

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