Différence entre setTimeout avec et sans guillemets et parenthèses

J'apprends JavaScript et j'ai récemment appris les événements de synchronisation JavaScript. Quand j'ai appris setTimeoutà W3Schools , j'ai remarqué un étrange personnage que je ne courais pas en avant. Ils utilisent des guillemets doubles et appellent ensuite la fonction.

Exemple:

setTimeout("alertMsg()", 3000);

Je sais que les guillemets doubles et simples en JavaScript signifient une chaîne.

J'ai aussi vu que je peux faire la même chose comme ça:

setTimeout(alertMsg, 3000);

Avec les parenthèses, il fait référence, sans les parenthèses, il est copié. Quand j'utilise les guillemets et les parenthèses, ça devient fou.

Je serai heureux si quelqu'un peut m'expliquer la différence entre ces trois façons d'utiliser setTimeout:

Avec les parenthèses:

setTimeout("alertMsg()", 3000);

Sans les guillemets et les parenthèses:

setTimeout(alertMsg, 3000);

Et le troisième utilise uniquement des guillemets:

setTimeout("alertMsg", 3000);

NB: Une meilleure source de setTimeoutréférence serait MDN .

Utilisation de setIntervalousetTimeout

Vous devez passer une référence à une fonction comme premier argument pour setTimeoutou setInterval. Cette référence peut prendre la forme de:

• Une fonction anonyme

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

• Un nom d'une fonction existante

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

• Une variable qui pointe vers une fonction existante

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

  _{Notez que j'ai défini "variable dans une fonction" séparément de "nom de la fonction". Il n'est pas évident que les variables et les noms de fonction occupent le même espace de noms et peuvent s'encombrer.}

Passer des arguments

Pour appeler une fonction et transmettre des paramètres, vous pouvez appeler la fonction dans le rappel affecté au temporisateur:

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

Il existe une autre méthode pour passer des arguments dans le gestionnaire, mais elle n'est pas compatible avec tous les navigateurs .

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

Contexte de rappel

Par défaut, le contexte du rappel (la valeur de l' thisintérieur de la fonction appelée par le temporisateur) lorsqu'il est exécuté est l'objet global window. Si vous souhaitez le modifier, utilisez bind.

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

Sécurité

Bien que ce soit possible, vous ne devez pas passer de chaîne à setTimeoutou setInterval. La transmission d'une chaîne crée setTimeout()ou setInterval()utilise une fonctionnalité similaire à eval()celle qui exécute les chaînes en tant que scripts , ce qui rend possible l'exécution de scripts arbitraires et potentiellement dangereux.

je pense que la fonction setTimeout que vous écrivez n'est pas en cours d'exécution. si vous utilisez jquery, vous pouvez le faire fonctionner correctement en procédant comme suit:

    function alertMsg() {
      //your func
    }

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

Tout à fait d'accord avec Joseph.

Voici un violon pour tester ceci: http://jsfiddle.net/nicocube/63s2s/

Dans le contexte du violon, l'argument chaîne ne fonctionne pas, à mon avis, car la fonction n'est pas définie dans la portée globale.

Que se passe-t-il en réalité si vous passez une chaîne comme premier paramètre de fonction

setTimeout ( 'string', number)

est la valeur du premier paramètre obtenu évalué quand il est temps de s'exécuter (après le passage numberdes millisecondes). Fondamentalement, il est égal à

setTimeout ( eval('string'), number)

C'est

une syntaxe alternative qui vous permet d'inclure une chaîne au lieu d'une fonction, qui est compilée et exécutée lorsque le temporisateur expire. Cette syntaxe n'est pas recommandée pour les mêmes raisons qui font de l'utilisation d'eval () un risque pour la sécurité.

Les échantillons que vous référez ne sont donc pas de bons échantillons et peuvent être donnés dans un contexte différent ou simplement par une simple faute de frappe.

Si vous invoquez comme ceci setTimeout(something, number), le premier paramètre n'est pas une chaîne, mais un pointeur sur quelque chose appelé something. Et encore si somethingest une chaîne - alors elle sera évaluée. Mais si c'est une fonction, alors la fonction sera exécutée. échantillon 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.

Avec les parenthèses:

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

Sans les guillemets et les parenthèses:

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

Et le troisième utilise uniquement des guillemets:

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

Dans l'exemple ci-dessus, appelez d'abord la fonction alertMsg2 () immédiatement (nous donnons le délai d'attente 4S mais cela ne dérange pas) après cette alerteMsg1 () (Un temps d'attente de 2 secondes) puis alertMsg4 () (Un temps d'attente de 8 secondes) mais le alertMsg3 () ne fonctionne pas parce que nous le plaçons dans les guillemets sans parties, il est donc traité comme une chaîne.