javascript - 在开始一个会自行循环的函数之前延迟 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() 函数期望它的第一个参数是一个函数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 中的工作方式，这取决于函数的调用方式。如果您只是在匿名函数(或 callHeartColor() 函数)中说heartColor($(this))，this 将不是元素悬停在上面。