带有和不带引号和括号的setTimeout之间的区别

时间:2012-04-25 09:34:15

标签: javascript settimeout

我正在学习JavaScript,最近我学到了关于JavaScript计时事件的知识。当我在W3Schools了解setTimeout时,我注意到一个奇怪的人物,我之前没有遇到过。他们使用双引号然后调用函数。

示例:

setTimeout("alertMsg()", 3000);

我知道JavaScript中的双引号和单引号表示字符串。

我也看到我可以这样做:

setTimeout(alertMsg, 3000);

使用它所引用的括号,没有括号,它被复制。当我使用引号和括号时,它变得疯狂。

如果有人可以向我解释这三种使用setTimeout的方式之间的区别,我会很高兴:

括号:

setTimeout("alertMsg()", 3000);

没有引号和括号:

setTimeout(alertMsg, 3000);

第三个只使用引号:

setTimeout("alertMsg", 3000);

N.B。:setTimeout引用的更好来源是MDN

6 个答案:

答案 0 :(得分:374)

使用setIntervalsetTimeout

您应该将对函数的引用作为setTimeoutsetInterval的第一个参数传递。该参考文献可以采用以下形式:

  • 匿名函数

    setTimeout(function(){/* Look mah! No name! */},2000);
    
  • 现有功能的名称

    function foo(){...}
    
    setTimeout(foo, 2000);
    
  • 指向现有函数的变量

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

    请注意我将“函数中的变量”与“函数名称”分开设置。变量和函数名称占用相同的命名空间并且可以互相破坏,这一点并不明显。

传递参数

要调用函数并传递参数,可以调用分配给计时器的回调函数:

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

还有另一种方法可以将参数传递给处理程序,但是it's not cross-browser compatible

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

回调上下文

默认情况下,执行时回调的上下文(计时器调用的函数内的this的值)是全局对象window。如果您想更改它,请使用bind

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

安全

虽然可以,但您应该not pass a stringsetTimeoutsetInterval。传递字符串会使setTimeout()setInterval()使用类似于eval() executes strings as scripts的功能,从而使任意且可能有害的脚本执行成为可能。

答案 1 :(得分:3)

我认为你写的setTimeout函数没有被运行。 如果使用jquery,可以通过执行以下操作使其正确运行:

    function alertMsg() {
      //your func
    }

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

答案 2 :(得分:2)

完全赞同约瑟夫。

这是测试它的小提琴:http://jsfiddle.net/nicocube/63s2s/

在小提琴的上下文中,字符串参数不起作用,在我看来是因为函数没有在全局范围内定义。

答案 3 :(得分:0)

如果您将字符串作为函数的第一个参数传递,那么现实中会发生什么

  

setTimeout('string'number

是在运行时间(经过number毫秒后)评估的第一个参数的值。 基本上等于

  

setTimeout(eval('string')number

这是

  

另一种语法,它允许您包含字符串而不是函数,该函数在计时器到期时进行编译和执行。不建议使用此语法,原因与使用eval()会带来安全风险的原因相同。

因此,您引用的样本不是很好的样本,可能在不同的上下文中给出或只是简单的错字。

如果像这样setTimeout(something, number)进行调用,则第一个参数不是字符串,而是指向something的指针。再一次,如果something是字符串-那么它将被求值。但是,如果是函数,则将执行函数。 jsbin sample

答案 4 :(得分:0)

    ##If i want to wait for some response from server or any action we use setTimeOut.

    functionOne =function(){
    console.info("First");

    setTimeout(()=>{
    console.info("After timeOut 1");
    },5000);
    console.info("only setTimeOut() inside code waiting..");
    }

    functionTwo =function(){
    console.info("second");
    }
    functionOne();
    functionTwo();

## So here console.info("After timeOut 1"); will be executed after time elapsed.
Output:
******************************************************************************* 
First
only setTimeOut() inside code waiting..
second
undefined
After timeOut 1  // executed after time elapsed.

答案 5 :(得分:-1)

带有括号:

setTimeout("alertMsg()", 3000); // It work, here it treat as a function

不带引号和括号:

setTimeout(alertMsg, 3000); // It also work, here it treat as a function

第三个仅使用引号:

setTimeout("alertMsg", 3000); // It not work, here it treat as a string

function alertMsg1() {
        alert("message 1");
    }
    function alertMsg2() {
        alert("message 2");
    }
    function alertMsg3() {
        alert("message 3");
    }
    function alertMsg4() {
        alert("message 4");
    }

    // this work after 2 second
    setTimeout(alertMsg1, 2000);

    // This work immediately
    setTimeout(alertMsg2(), 4000);

    // this fail
    setTimeout('alertMsg3', 6000);

    // this work after 8second
    setTimeout('alertMsg4()', 8000);

  

在上面的示例中,第一个alertMsg2()函数立即调用(我们   在发出alertMsg1()之后给出4S超时,但它不会打扰(A   2秒的时间等待),然后alertMsg4()(8秒的时间等待),但是   alertMsg3()无法正常工作,因为我们将其放在引号中   没有聚会,因此将其视为字符串。