Comment puis-je passer un paramètre à un callback de setTimeout()?

Question

J'ai du code JavaScript qui ressemble à :

function statechangedPostQuestion()
{
  //alert("statechangedPostQuestion");
  if (xmlhttp.readyState==4)
  {
    var topicId = xmlhttp.responseText;
    setTimeout("postinsql(topicId)",4000);
  }
}

function postinsql(topicId)
{
  //alert(topicId);
}

Je reçois une erreur selon laquelle topicId n'est pas défini. Tout fonctionnait avant que j'utilise la fonction setTimeout().

Je veux que ma fonction postinsql(topicId) soit appelée après un certain temps. Que devrais-je faire?

Answer 1

setTimeout(function() {
    postinsql(topicId);
}, 4000);

Vous devez alimenter une fonction anonyme en tant que paramètre au lieu d'une chaîne de caractères. Cette dernière méthode ne devrait même pas fonctionner - selon la spécification ECMAScript - mais les navigateurs sont simplement indulgents. Ceci est la solution appropriée. Ne vous fiez jamais à passer une chaîne de caractères en tant que 'fonction' lors de l'utilisation de setTimeout() ou setInterval(). C'est plus lent, car cela doit être évalué et ce n'est tout simplement pas correct.

MISE À JOUR:

Comme l'a dit Hobblin dans ses commentaires à la question, maintenant vous pouvez passer des arguments à la fonction à l'intérieur de setTimeout en utilisant Function.prototype.bind().

Exemple:

setTimeout(postinsql.bind(null, topicId), 4000);

Answer 2

Dans les navigateurs modernes (c'est-à-dire IE11 et au-delà), le "setTimeout" reçoit un troisième paramètre qui est envoyé en tant que paramètre à la fonction interne à la fin du minuteur.

Exemple:

var hello = "Bonjour le monde";
setTimeout(alert, 1000, hello);

Plus de détails sur fonction globale setTimeout() - MDN

Answer 3

Après avoir fait des recherches et des tests, la seule implémentation correcte est :

setTimeout(votreRéférenceDeFonction, 4000, param1, param2, paramN);

setTimeout transmettra tous les paramètres supplémentaires à votre fonction pour qu'ils puissent être traités là-bas.

La fonction anonyme peut fonctionner pour des choses très basiques, mais dans une instance d'un objet où vous devez utiliser "this", il n'y a aucun moyen de le faire fonctionner. Toute fonction anonyme modifiera "this" pour pointer vers la fenêtre, donc vous perdrez votre référence d'objet.

Answer 4

C'est une question très ancienne avec déjà une réponse "correcte", mais je pensais mentionner une autre approche que personne n'a mentionnée ici. C'est copié-collé de l'excellente bibliothèque underscore:

_.delay = function(func, wait) {
  var args = slice.call(arguments, 2);
  return setTimeout(function(){ return func.apply(null, args); }, wait);
};

Vous pouvez passer autant d'arguments que vous le souhaitez à la fonction appelée par setTimeout et en prime (enfin, habituellement en prime), la valeur des arguments passés à votre fonction est figée lorsque vous appelez setTimeout, donc s'ils changent de valeur à un moment donné entre l'appel de setTimeout() et l'expiration du délai, eh bien... ce n'est plus si frustrant que ça :)

Voici un exemple où vous pouvez voir ce que je veux dire.

Answer 5

J'ai récemment été confronté à la situation unique de devoir utiliser un setTimeout dans une boucle. Comprendre cela peut vous aider à comprendre comment passer des paramètres à setTimeout.

Méthode 1

Utilisez forEach et Object.keys, comme le suggère Sukima dans sa suggestion :

var testObject = {
    prop1: 'test1',
    prop2: 'test2',
    prop3: 'test3'
};

Object.keys(testObject).forEach(function(propertyName, i) {
    setTimeout(function() {
        console.log(testObject[propertyName]);
    }, i * 1000);
});

Je recommande cette méthode.

Méthode 2

Utilisez bind :

var i = 0;
for (var propertyName in testObject) {
    setTimeout(function(propertyName) {
        console.log(testObject[propertyName]);
    }.bind(this, propertyName), i++ * 1000);
}

JSFiddle : http://jsfiddle.net/MsBkW/

Méthode 3

Ou si vous ne pouvez pas utiliser forEach ou bind, utilisez une IIFE :

var i = 0;
for (var propertyName in testObject) {
    setTimeout((function(propertyName) {
        return function() {
            console.log(testObject[propertyName]);
        };
    })(propertyName), i++ * 1000);
}

Méthode 4

Mais si vous ne vous souciez pas de IE < 10, alors vous pourriez utiliser la suggestion de Fabio :

var i = 0;
for (var propertyName in testObject) {
    setTimeout(function(propertyName) {
        console.log(testObject[propertyName]);
    }, i++ * 1000, propertyName);
}

Méthode 5 (ES6)

Utilisez une variable à portée de bloc :

let i = 0;
for (let propertyName in testObject) {
    setTimeout(() => console.log(testObject[propertyName]), i++ * 1000);
}

Cependant, je vous recommande toujours d'utiliser Object.keys avec forEach en ES6.