Difference between setTimeout with and without quotes and parentheses

2022-08-30 00:39:10

I am learning JavaScript and I have learned recently about JavaScript timing events. When I learned about at W3Schools, I noticed a strange figure which I didn’t run into before. They are using double quotes and then call the function.setTimeout

Example:

setTimeout("alertMsg()", 3000);

I know that double and single quotes in JavaScript means a string.

Also I saw that I can do the same like that:

setTimeout(alertMsg, 3000);

With the parentheses it’s referring, without the parentheses it’s copied. When I am using the quotes and the parentheses it’s getting crazy.

I will be glad if someone can explain to me the difference between these three ways of using :setTimeout

With the parentheses:

setTimeout("alertMsg()", 3000);

Without the quotes and the parentheses:

setTimeout(alertMsg, 3000);

And the third is only using quotes:

setTimeout("alertMsg", 3000);

N.B.: A better source for reference would be MDN.setTimeout


答案 1

Using or setIntervalsetTimeout

You should pass a reference to a function as the first argument for or . This reference may be in the form of:setTimeoutsetInterval

  • An anonymous function

    setTimeout(function(){/* Look mah! No name! */},2000);
    
  • A name of an existing function

    function foo(){...}
    
    setTimeout(foo, 2000);
    
  • A variable that points to an existing function

    var foo = function(){...};
    
    setTimeout(foo, 2000);
    

    Do note that I set "variable in a function" separately from "function name". It's not apparent that variables and function names occupy the same namespace and can clobber each other.

Passing arguments

To call a function and pass parameters, you can call the function inside the callback assigned to the timer:

setTimeout(function(){
  foo(arg1, arg2, ...argN);
}, 1000);

There is another method to pass in arguments into the handler, however it's not cross-browser compatible.

setTimeout(foo, 2000, arg1, arg2, ...argN);

Callback context

By default, the context of the callback (the value of inside the function called by the timer) when executed is the global object . Should you want to change it, use .thiswindowbind

setTimeout(function(){
  this === YOUR_CONTEXT; // true
}.bind(YOUR_CONTEXT), 2000);

Security

Although it's possible, you should not pass a string to or . Passing a string makes or use a functionality similar to eval() that executes strings as scripts, making arbitrary and potentially harmful script execution possible. setTimeoutsetIntervalsetTimeout()setInterval()


答案 2

i think the setTimeout function that you write is not being run. if you use jquery, you can make it run correctly by doing this :

    function alertMsg() {
      //your func
    }

    $(document).ready(function() {
       setTimeout(alertMsg,3000); 
       // the function you called by setTimeout must not be a string.
    });