CODEWITHSUNDEEP
javascript
moey
moey

Reputation: 10887

Upon Link Click and setTimeout

In JavaScript, I am trying to execute a function 2 seconds after a link is clicked, and wait until the function completes its execution before going to the link destination.

/* JavaScript */
function myFunction() { /* Block of code, with no 'return false'. */ }

<!-- HTML -->
<a onclick="setTimeout(myFunction, 2000);" href="http://www.siku-siku.com">Link</a>

The problem is upon click, the browser immediately goes to the link destination i.e. myFunction didn't have time to execute. Did I miss anything here?

Thanks beforehand.

Upvotes: 2

Views: 10549

Answers (3)

Anupam
Anupam

Reputation: 8016

<a onclick="setTimeout(myFunction, 2000);" href="#">Link</a>

JAVASCRIPT

function myFunction(){
////your other code
///
///
window.location="http://www.siku-siku.com";//at the end

}

demo here

Upvotes: 2

Saeed Neamati
Saeed Neamati

Reputation: 35832

Yes, the default behavior for a link is a GET request sent by the browser. Imagine that before you register your handler, browser has registered another handler to initiate a get request (just imaginary). This is the case here. You should return false in your inline handler:

   onclick = '(function(){ setTimeout(yourFunction, 2000); return false;})()'

or more simpler:

   onclick = 'setTimeout(yourfunction, 2000); return false;'

Update:

Use this (it requires jQuery):

    $(function () {
        $('a').click(function (e) {
            e.preventDefault();
            var target = $(this).attr('href');
            setTimeout('go("' + target + '")', 2000);
        });
    });
    function go(target) {
        console.log('2 seconds passed');
        document.location = target;
    }

Upvotes: -1

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196002

You will need to return false from your onclick event, to cancel the actual browser handled page load.

And since you want to follow the link (once the function is complete) you will need to do that through javascript. But you are using a timeout so you loose the reference to the clicked element, so we need to pass that too in the method (if you want this logic for multiple links)

html

<a onclick="return createTimedLink(this, myFunction, 2000);" href="http://www.siku-siku.com">Link</a>

javascript

function createTimedLink(element, callback, timeout){
  setTimeout( function(){callback(element);}, timeout);
  return false;
}

function myFunction(element) { 
/* Block of code, with no 'return false'. */
  window.location = element.href;
 }

demo at http://jsfiddle.net/gaby/mdkjX/2/

Upvotes: 5

Related Questions