Question

In jquery I have a button with a fading effect:

function blinky() {
    $('#ButtonContent_btnSubmit').delay(100).fadeTo(100, 0.5).delay(100).fadeTo(100, 1, blinky);    
}

This causes a nice blinking effect, but I only want the blinking effect to last for say 10 seconds.

I want it to only blink for say 10 seconds…Could I apply setTimeout() to this? I tried to apply setTimeout like so:

function blinky() {
    setTimeout($('#ButtonContent_btnSubmit').delay(100).fadeTo(100, 0.5).delay(100).fadeTo(100, 1, blinky), 100);  
}

But this does not seem to work.

Edit

Im a jquery noob so Im trying to get this to work…
Lets say here is my document ready:

$(document).ready(function () {
 if ($('#StatusContent_ddlStatus').val() == "Not Submitted" && $("#LineItemContent_gvLineItems tr").length > 0) {
              blink();
        }
});

var count = 0;

function blink() {
    if (++count < 10)
        $('#ButtonContent_btnSubmit').delay(100).fadeTo(100, 0.5).delay(100).fadeTo(100, 1, blink);
}​

In developer tools (chrome) it throws some sort of exception…

Edit 2

If I put it all in document ready:

 $(document).ready(function () {
     if ($('#StatusContent_ddlStatus').val() == "Not Submitted" && $("#LineItemContent_gvLineItems tr").length > 0) {
                  blink();
            }

 var count = 0;

    function blink() {
        if (++count < 10)
            $('#ButtonContent_btnSubmit').delay(100).fadeTo(100, 0.5).delay(100).fadeTo(100, 1, blink);
    }​

    });

Then in developer tools it says Uncaught syntax error: Unexpected token illegal.

Edit 3

I tried to place it at the top before calling it:

$(document).ready(function () {
        var count = 0; 
        var f = 0;

         function blink() { 
            if (++count < 10) 
                $('#ButtonContent_btnSubmit').delay(100).fadeTo(100, 0.5).delay(100).fadeTo(100, 1,        blink); 
            }

          if ($('#StatusContent_ddlStatus').val() == "Not Submitted" && $("#LineItemContent_gvLineItems tr").length > 0) {
            blink();
        }
});

Same issue…

Answer 1

It can be a lot simpler, just save the number of calls to the blink function:

var count = 0;

function blinky() {
    if (++count < 10)
        $('#ButtonContent_btnSubmit').delay(100).fadeTo(100, 0.5).delay(100).fadeTo(100, 1, blinky);
}​

Or with time limitation:

var startDate = new Date().getTime();
function blinky() {
    if (new Date().getTime() - startDate < 10000)
        $('#ButtonContent_btnSubmit').delay(100).fadeTo(100, 0.5).delay(100).fadeTo(100, 1, blinky);
}​