CODEWITHSUNDEEP
javascript
HelloCW
HelloCW

Reputation: 2335

SetTimeout don't work correctly

I think the pop window with OK string will be dislayed afetr 5s after I click the button, but the pop window dispalyed immediately after I click the button, why?

Thanks!

<html>
<head>
    <title>Wake up call</title>
    <script type="text/javascript">
        function wakeUpCall() { // Function is defined here
            setTimeout(aa("ok"), 5000);
        }

        function aa(bb) {
            alert(bb);
        }
    </script>
</head>
<body bgcolor="lightblue">
    <form>
        <input type="button"
            value="Wake me"
            onclick="wakeUpCall()">
    </form>
</body>
</html>

Upvotes: 1

Views: 2377

Answers (4)

Shamis Shukoor
Shamis Shukoor

Reputation: 2515

function wakeUpCall() { // Function is defined here
            setTimeout(function(){ alert("ok");}, 5000);
        }

Upvotes: 2

tomsseisums
tomsseisums

Reputation: 13377

You are trying to do it the wrong way.

You have to use a callback for the setTimeout:

setTimeout(function()
{
    // actual code here
}, 5000);

Mike has provided in his answer - that you could use an evaluatable string:

setTimeout('/* actual code here */', 5000);

But that is strongly discouraged, use his other example - passing the callback function as a reference and invoking callback arguments. You have to take in mind, though, that if you are going with callback arguments, see this section of MDN article. The callback arguments aren't supported in all browsers.

Personally, I'd suggest going with plain old callbacks, because that's how the setTimeout is meant to be used.

Just for your information:

The reason why your snippet isn't working for you, is, because:

setTimeout(aa('ok'), 5000);
// aa('ok') here is executed, and returns its value, so, in the end, you pass the returned value of aa inside the Timeout.
// and, nor alert alert, nor your function have a "return" statement, so they both will  return always undefined.
// that translates to:

setTimeout(undefined, 5000); // and, that does nothing

Upvotes: 2

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167240

Use anonymous functions for this.

<html>
<head>
    <title>Wake up call</title>
    <script type="text/javascript">
        function wakeUpCall() { // Function is defined here
            setTimeout(function(){aa("ok");}, 5000);
        }

        function aa(bb) {
            alert(bb);
        }
    </script>
</head>
<body bgcolor="lightblue">
    <form>
        <input type="button"
            value="Wake me"
            onclick="wakeUpCall()">
    </form>
</body>
</html>

Upvotes: 1

Mike de Klerk
Mike de Klerk

Reputation: 12338

What if you would do it like this:

<html>
<head>
    <title>Wake up call</title>
    <script type="text/javascript">
        function wakeUpCall() { // Function is defined here
            setTimeout('aa("ok");', 5000);
        }

        function aa(bb) {
            alert(bb);
        }
    </script>
</head>
<body bgcolor="lightblue">
    <form>
        <input type="button"
            value="Wake me"
            onclick="wakeUpCall()">
    </form>
</body>
</html>

Notice I have quoted the statement to execute in the setTimeout function. It those quotes confuse you, I think this is a good resource to take a look at: https://developer.mozilla.org/en-US/docs/DOM/window.setTimeout

Another way to do it, I just learned from the resource above, is like this:

function wakeUpCall() { // Function is defined here
    setTimeout(aa, 5000, "Your tekst here");
}

Upvotes: 1

Related Questions