I'm trying to create a 6 second delay before the heartColor(e) function begins, the function will then continue to loop. I don't understand why it's starting the function immediatley, and not waiting the 6 seconds it's supposed to, what did I do wrong?

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);
})

I'm trying to create a 6 second delay before the heartColor(e) function begins, the function will then continue to loop. I don't understand why it's starting the function immediatley, and not waiting the 6 seconds it's supposed to, what did I do wrong?

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);
})

• javascript
• jquery
• function
• settimeout

3 Answers 3

The setTimeout() function expects its first parameter to be a function reference (or a string, but that's not remended for several reasons). You are not passing it a function reference, you are calling the heartColor() function and passing the result to setTimeout(). So the function executes immediately, and then after six seconds nothing happens because the return value was undefined so setTimeout() had nothing to work with.

Try this instead:

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

The reason I have included an anonymous function as the parameter to setTimeout is that your call to heartColor() needs to pass a parameter through. If it didn't have any parameters you could do this:

setTimeout(heartColor, 6000);

Note there are no parentheses after heartColor - that gets a reference to the function without calling it so that later setTimeout calls it for you. But you can't get a reference to the function and provide parameters at the same time so you need to wrap the call up in another function. You could do this:

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

My original answer with the anonymous function is kind of short hand for that and (most people find it) more convenient.

The reason I have created a variable $this is because of the way the this keyword works in JavaScript, which depends on how a function is called. If you simply said heartColor($(this)) inside the anonymous function (or the callHeartColor() function) this would not be the element being hovered over.

you are invoking the function heartColor instead of passing it as a parameter. you have to do:

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

You want this:

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