在开始循环自身的功能之前延迟6秒,小,不工作,为什么？

Question

我试图在heartColor(e)函数开始之前创建一个6秒的延迟,然后函数将继续循环.我不明白为什么它启动函数immediatley,而不是等待它应该的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中的工作方式,这取决于函数的调用方式.如果您只是简单地说heartColor($(this))匿名函数(或callHeartColor()函数)内部this将不会是悬停的元素.