Diferença entre setTimeout com e sem aspas e parênteses

Estou aprendendo JavaScript e aprendi recentemente sobre eventos de sincronização de JavaScript. Quando soube setTimeoutda W3Schools , notei uma figura estranha na qual não encontrei antes. Eles estão usando aspas duplas e depois chamam a função

Exemplo:

setTimeout("alertMsg()", 3000);

Eu sei que aspas duplas e simples em JavaScript significa uma string.

Também vi que posso fazer o mesmo assim:

setTimeout(alertMsg, 3000);

Com os parênteses está se referindo, sem os parênteses é copiado. Quando estou usando aspas e parênteses, está ficando louco.

Ficarei feliz se alguém puder me explicar a diferença entre essas três maneiras de usar setTimeout:

Com os parênteses:

setTimeout("alertMsg()", 3000);

Sem as aspas e os parênteses:

setTimeout(alertMsg, 3000);

E o terceiro está usando apenas aspas:

setTimeout("alertMsg", 3000);

NB: Uma melhor fonte de setTimeoutreferência seria MDN .

Usando setInterval ousetTimeout

Você deve passar uma referência a uma função como o primeiro argumento para setTimeout or setInterval. Esta referência pode estar na forma de:

• Uma função anônima

  setTimeout(function(){/* Look mah! No name! */},2000);

• Um nome de uma função existente

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

• Uma variável que aponta para uma função existente

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

  _{Observe que eu defino "variável em uma função" separadamente de "nome da função". Não é aparente que variáveis ​​e nomes de funções ocupem o mesmo espaço para nome e possam se opor.}

Passando argumentos

Para chamar uma função e passar parâmetros, você pode chamar a função dentro do retorno de chamada atribuído ao timer:

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

Existe outro método para passar argumentos para o manipulador, no entanto, ele não é compatível com vários navegadores .

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

Contexto de retorno de chamada

Por padrão, o contexto do retorno de chamada (o valor de thisdentro da função chamada pelo timer) quando executado é o objeto global window. Se você quiser mudar, use bind.

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

Segurança

Embora seja possível, você não deve passar uma string para setTimeoutou setInterval. Passar uma string torna setTimeout()ou setInterval()usa uma funcionalidade semelhante à eval()que executa strings como scripts , possibilitando a execução arbitrária e potencialmente prejudicial de scripts.

Eu acho que a função setTimeout que você escreve não está sendo executada. se você usa o jquery, pode fazê-lo funcionar corretamente, fazendo o seguinte:

    function alertMsg() {
      //your func
    }

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

Concordo totalmente com Joseph.

Aqui está um violino para testar isso: http://jsfiddle.net/nicocube/63s2s/

No contexto do violino, o argumento string não funciona, na minha opinião, porque a função não está definida no escopo global.

O que acontece na realidade no caso de você passar a string como o primeiro parâmetro da função

setTimeout ( 'string', number)

é o valor do primeiro parâmetro avaliado quando é hora de executar (após numbermilissegundos passados). Basicamente, é igual a

setTimeout ( eval('string'), number)

Isto é

uma sintaxe alternativa que permite incluir uma string em vez de uma função, que é compilada e executada quando o timer expirar. Essa sintaxe não é recomendada pelos mesmos motivos que tornam o uso de eval () um risco à segurança.

Portanto, as amostras que você se refere não são boas e podem ser fornecidas em diferentes contextos ou apenas erros de digitação.

Se você chamar assim setTimeout(something, number), o primeiro parâmetro não será uma string, mas um ponteiro para algo chamado something. E novamente se somethingfor string - então será avaliado. Mas se for função, a função será executada. amostra jsbin

    ##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.

Com os parênteses:

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

Sem as aspas e os parênteses:

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

E o terceiro está usando apenas aspas:

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

No exemplo acima, a primeira função alertMsg2 () chama imediatamente (damos o tempo limite 4S, mas não incomoda) depois disso alertMsg1 () (uma espera de tempo de 2 segundos) e alertMsg4 () (uma espera de 8 segundos) mas o alertMsg3 () não está funcionando porque o colocamos entre aspas sem partes, portanto é tratado como uma string.