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

Question

Je suis en train d'apprendre JavaScript et j'ai appris récemment l'existence des événements de synchronisation JavaScript. Quand j'ai appris setTimeout à l'adresse W3Schools j'ai remarqué une silhouette étrange que je n'avais jamais rencontrée auparavant. 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 de caractères.

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

setTimeout(alertMsg, 3000);

Avec les parenthèses, c'est une référence, sans les parenthèses, c'est une copie. Quand j'utilise les guillemets et les parenthèses, ça devient fou.

Je serais heureux si quelqu'un pouvait 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 la troisième est de n'utiliser que des guillemets :

setTimeout("alertMsg", 3000);

---

N.B. : Une meilleure source pour setTimeout La référence serait MDN .

Answer 1

Utilisation de setInterval o setTimeout

Vous devez passer une référence à une fonction en tant que premier argument de la fonction setTimeout o setInterval . Cette référence peut être sous la forme de :

• Une fonction anonyme

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

• Le 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 fonction". Il n'est pas évident que les variables et les noms de fonction occupent le même espace de nommage et peuvent s'entrechoquer.}

Passage d'arguments

Pour appeler une fonction et passer des paramètres, vous pouvez appeler la fonction à l'intérieur du callback affecté au timer :

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

Il existe une autre méthode pour passer des arguments dans le gestionnaire, cependant il n'est pas compatible avec les différents navigateurs .

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

Contexte de rappel

Par défaut, le contexte de la callback (la valeur de l'option this à l'intérieur de la fonction appelée par le timer) 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é

Même si c'est possible, vous devriez ne pas passer une chaîne de caractères a setTimeout o setInterval . Le passage d'une chaîne de caractères rend setTimeout() o setInterval() utilisent une fonctionnalité similaire à eval() que exécute les chaînes comme des scripts. rendant possible l'exécution arbitraire et potentiellement nuisible de script.

Answer 2

Je pense que la fonction setTimeout que vous avez écrite n'est pas exécutée. si vous utilisez jquery, vous pouvez la faire fonctionner correctement en faisant ceci :

    function alertMsg() {
      //your func
    }

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

Answer 3

Totalement d'accord avec Joseph.

Voici une manipulation pour tester cela : http://jsfiddle.net/nicocube/63s2s/

Dans le contexte du fiddle, l'argument string ne fonctionne pas, à mon avis parce que la fonction n'est pas définie dans la portée globale.

Answer 4

Que se passe-t-il en réalité dans le cas où vous passez une chaîne de caractères comme premier paramètre de la fonction

setTimeout( 'string' , number )

La valeur du premier paramètre est évaluée au moment de l'exécution (après l'exécution). number de millisecondes écoulées). En gros, c'est égal à

setTimeout( eval('string') , number )

C'est

une syntaxe alternative qui vous permet d'inclure une chaîne de caractères au lieu d'une fonction, qui est compilée et exécutée à l'expiration du délai. Cette syntaxe n'est pas recommandée pour les mêmes raisons que celles qui font de l'utilisation de eval() un risque pour la sécurité.

Les échantillons auxquels vous vous référez ne sont donc pas de bons échantillons, et peuvent avoir été donnés dans un contexte différent ou par simple erreur de frappe.

Si vous invoquez comme ceci setTimeout(something, number) le premier paramètre n'est pas une chaîne de caractères, mais un pointeur vers un objet appelé something . Et encore une fois si something est une chaîne - alors elle sera évaluée. Mais si c'est une fonction, alors la fonction sera exécutée. jsbin échantillon

Answer 5

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