javascript - Upon Link Click and setTimeout - Stack Overflow

admin管理员组

文章数量:1356857

In JavaScript, I am trying to execute a function 2 seconds after a link is clicked, and wait until the function pletes 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="">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.

In JavaScript, I am trying to execute a function 2 seconds after a link is clicked, and wait until the function pletes 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.">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.

• javascript

Share Improve this question Follow asked Jul 7, 2011 at 10:13 moeymoey 10.9k2525 gold badges7373 silver badges112112 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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 plete) 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.">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/gaby/mdkjX/2/

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

JAVASCRIPT

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

}

demo here

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

本文标签： javascriptUpon Link Click and setTimeoutStack Overflow