The first parameter of setTimeout in javascript

I often got confused by different usages of the setTimeout function. I do not know where I got the following usage, which is proven not the correct usage:

setTimeout("alert('hello world')",1000);

The above code pops up a window saying “hello world” after 1 second. If the code to be executed is complex, we can put them in a function and pass the function call as the first parameter of setTimeout:

function fun()
{
  alert("hello world");
}
setTimeout("fun()",1000);

But what if the function has parameters?

function fun(str)
{
  alert(str);
}
setTimeout("fun('hello world')",1000);

The above code still works well. We can even pass a variable as the parameter of the function:

function fun(str)
{
  alert(str);
}
var str="hello world";
setTimeout("fun(str)",1000);

Things went well until I called setTimeout inside another function instead of the global scope:

function fun(str)
{
  alert(str);
}

function fun1()
{
  var str="hello world";
  setTimeout("fun(str)",1000);
}

fun1();

Now you get the error:”ReferenceError: str is not defined”. We need to know how the string parameter of setTimeout works. When the timer expires, the string of the first parameter is evaluated, at global scope, i.e., it looks for the variable str at the global scope, and can not find it in this case. Even you use the following code to try to form the string at the execution time of the setTimeout statement rather than the expiration time of the timer, you still get the error:”SyntaxError: missing ) after argument list”:

function fun(str)
{
  alert(str);
}

function fun1()
{
  var str="hello world";
  setTimeout("fun("+str+")",1000);
}

fun1();

We may resort to another usage of setTimeout, i.e., use a function as its first parameter:

function fun(str)
{
  alert(str);
}

function fun1()
{
  var str="hello world";
  setTimeout(fun(str),1000);
}

fun1();

But why the dialog pops up immediately instead of 1 second later? This is because I misused the first parameter. The second form of setTimeout takes a function as the first parameter. It can be a function name:

function fun()
{
  alert("hello world");
}

function fun1()
{
  setTimeout(fun,1000);
}

fun1();

Note that you should not include the function name in a string as follows:

function fun()
{
  alert("hello world");
}

function fun1()
{
  setTimeout("fun",1000);
}

fun1();

This just does not work.

You can also use an anonymous function:

function fun1()
{
  setTimeout(function(){alert("hello world");},1000);
}

fun1();

But in the previous example, we use the returned value of a function call(“fun(str)”) as its first parameter and this returned value is NOT even a function. The function call is executed at the execution time of the setTimeout statement, not when the timer is expired, so we did not see the 1s delay.

Using a function rather than a string is the preferred usage of setTimeout. But if the function has parameters, how to pass the parameters to the function? We’ve known that we should not pass the parameters in the setTimeout statement as it will invoke the function immediately. In modern browsers, you can pass the parameters as the parameter of setTimeout:

function fun(str)
{
  alert(str);
}

function fun1()
{
  var str="hello world";
  setTimeout(fun,1000,str);
}

fun1();

Old browsers do not support this kind of variable parameters for setTimeout. You can use an anonymous function to wrap up the real function:

function fun(str)
{
  alert(str);
}

function fun1()
{
  var str="hello world";
  setTimeout(function()
        {
          fun(str);
        }
    ,1000);
}

fun1();

reference:https://www.w3schools.com/jsref/met_win_settimeout.asp

 

 

 

 

 

Comments are closed, but trackbacks and pingbacks are open.