jQuery function attr() doesn't always update img src attribute

Question

Context: On my product website I have a link for a Java webstart application (in several locations).

My goal: prevent users from double-clicking, i. e. only "fire" on first click, wait 3 secs before enabling the link again. On clicking, change the link image to something that signifies that the application is launching.

My solution works, except the image doesn't update reliably after clicking. The commented out debug output gives me the right content and the mouseover callbacks work correctly, too.

See it running here: http://www.auctober.de/beta/ (click the Button "jetzt starten").

BTW: if anybody has a better way of calling a function with a delay than that dummy-animate, let me know.

JavaScript:

<script type="text/javascript">
      <!--
        allowClick = true;
        linkElements = "a[href='http://www.auctober.de/beta/?startjnlp=true&amp;rand=1249026819']";
        $(document).ready(function() {
            $('#jnlpLink').mouseover(function() {
                if ( allowClick ) {
                    setImage('images/jetzt_starten2.gif');
                }
            });
            $('#jnlpLink').mouseout(function() {
                if ( allowClick ) {
                    setImage('images/jetzt_starten.gif');
                }
            });

           $(linkElements).click(function(evt) {
                if ( ! allowClick ) {
                    evt.preventDefault();
                }
                else {
                    setAllowClick(false);
                    var altContent = $('#jnlpLink').attr('altContent');
                    var oldContent = $('#launchImg').attr('src');
                    setImage(altContent);
                    $(this).animate({opacity: 1.0}, 3000, "", function() {
                        setAllowClick(true);
                        setImage(oldContent);
                    });
                }
            });

        });

        function setAllowClick(flag) {
            allowClick = flag;
        }
        function setImage(imgSrc) {
            //$('#debug').html("img:"+imgSrc);
            $('#launchImg').attr('src', imgSrc);
        }
      //-->
</script>

Answer 1

Check out the BlockUI plug-in. Sounds like it could be what you're looking for.

You'll find a nice demo here.

Answer 2

A delay can be achieved with the setTimeout function

setTimeout(function() { alert('something')}, 3000);//3 secs

And for your src problem, try:

$('#launchImg')[0].src = imgSrc;

Answer 3

Add this variable at the top of your script:

var timer;

Implement this function:

function setFlagAndImage(flag) {
    setAllowClick(flag);
    setImage();
}

And then replace the dummy animation with:

timer = window.setTimeout(function() { setFlagAndImage(true); }, 3000);

If something else then happens and you want to stop the timer, you can just call:

window.clearTimeout(timer);

Answer 4

...or just use:

$(this).animate({opacity: '1'}, 1000);

wherever you want in your code, where $(this) is something that is already at opacity=1...which means everything seemingly pauses for one second. I use this all the time.