Come posso passare un parametro a un callback setTimeout ()?

Ho del codice JavaScript che assomiglia a:

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

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

topicIdViene visualizzato un errore non definito Tutto funzionava prima di utilizzare la setTimeout()funzione.

Voglio che la mia postinsql(topicId)funzione venga chiamata dopo qualche tempo. Cosa dovrei fare?

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

È necessario alimentare una funzione anonima come parametro anziché come stringa, quest'ultimo metodo non dovrebbe nemmeno funzionare secondo le specifiche ECMAScript ma i browser sono solo indulgenti. Questa è la soluzione corretta, non fare mai affidamento sul passaggio di una stringa come "funzione" quando si utilizza setTimeout()o setInterval(), è più lento perché deve essere valutato e non è giusto.

AGGIORNARE:

Come Hobblin ha detto nei suoi commenti alla domanda, ora puoi passare argomenti alla funzione all'interno di setTimeout usando Function.prototype.bind().

Esempio:

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

Nei browser moderni, "setTimeout" riceve un terzo parametro che viene inviato come parametro alla funzione interna alla fine del timer.

Esempio:

var hello = "Hello World";
setTimeout(alert, 1000, hello);

Più dettagli:

• https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers.setTimeout
• http://arguments.callee.info/2008/11/10/passing-arguments-to-settimeout-and-setinterval/

Dopo aver effettuato alcune ricerche e test, l'unica implementazione corretta è:

setTimeout(yourFunctionReference, 4000, param1, param2, paramN);

setTimeout passerà tutti i parametri extra alla tua funzione in modo che possano essere elaborati lì.

La funzione anonima può funzionare per cose molto basilari, ma all'interno di un oggetto in cui devi usare "this", non c'è modo di farlo funzionare. Qualsiasi funzione anonima cambierà "questo" per puntare alla finestra, quindi perderai il riferimento all'oggetto.

Questa è una domanda molto antica con una risposta già "corretta", ma ho pensato di menzionare un altro approccio che nessuno ha menzionato qui. Questo viene copiato e incollato dall'eccellente libreria di sottolineatura :

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

Puoi passare tutti gli argomenti che desideri alla funzione chiamata da setTimeout e come bonus aggiuntivo (bene, di solito un bonus) il valore degli argomenti passati alla tua funzione viene congelato quando chiami setTimeout, quindi se cambiano valore a un certo punto tra quando viene chiamato setTimeout () e quando scade, beh ... non è più così orribilmente frustrante :)

Ecco un violino in cui puoi vedere cosa intendo.

Di recente mi sono imbattuto nella singolare situazione della necessità di utilizzare un setTimeoutin un ciclo . Capire questo può aiutarti a capire come passare i parametri setTimeout.

Metodo 1

Usa forEache Object.keys, come suggerito da Sukima :

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

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

Consiglio questo metodo

Metodo 2

Utilizzare 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/

Metodo 3

O se non puoi usare forEacho bind, usa un IIFE :

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

Metodo 4

Ma se non ti interessa IE <10, puoi usare il suggerimento di Fabio :

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

Metodo 5 (ES6)

Utilizzare una variabile con ambito di blocco:

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

Anche se consiglierei comunque di utilizzarlo Object.keyscon forEachES6.

Hobblin lo ha già commentato sulla domanda, ma dovrebbe essere davvero una risposta!

L'utilizzo Function.prototype.bind()è il modo più pulito e flessibile per farlo (con l'ulteriore vantaggio di poter impostare il thiscontesto):

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

Per ulteriori informazioni, consultare questi collegamenti MDN:
https://developer.mozilla.org/en/docs/DOM/window.setTimeout#highlighter_547041 https://developer.mozilla.org/en/docs/JavaScript/Reference/Global_Objects/Function / bind # With_setTimeout

Alcune risposte sono corrette ma contorte.

Sto rispondendo di nuovo a questo, 4 anni dopo, perché mi imbatto ancora in un codice troppo complesso per risolvere esattamente questa domanda. C'è una soluzione elegante.

Prima di tutto, non passare una stringa come primo parametro quando si chiama setTimeout perché invoca effettivamente una chiamata alla funzione "eval" lenta.

Quindi, come passiamo un parametro a una funzione di timeout? Usando la chiusura:

settopic=function(topicid){
  setTimeout(function(){
    //thanks to closure, topicid is visible here
    postinsql(topicid);
  },4000);
}

...
if (xhr.readyState==4){
  settopic(xhr.responseText);
}

Alcuni hanno suggerito di utilizzare la funzione anonima quando si chiama la funzione di timeout:

if (xhr.readyState==4){
  setTimeout(function(){
    settopic(xhr.responseText);
  },4000);
}

La sintassi funziona. Ma quando viene chiamato settopic, cioè 4 secondi dopo, l'oggetto XHR potrebbe non essere lo stesso. Pertanto è importante pre-associare le variabili .

La mia risposta:

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

Spiegazione:

La funzione anonima creata restituisce un'altra funzione anonima. Questa funzione ha accesso a quella originariamente passata topicId, quindi non farà errori. La prima funzione anonima viene immediatamente chiamata, passando topicId, quindi la funzione registrata con un ritardo ha accesso topicIdal momento della chiamata, attraverso le chiusure.

O

Questo sostanzialmente si converte in:

setTimeout(function() {
  postinsql(topicId); // topicId inside higher scope (passed to returning function)
}, 4000);

EDIT: ho visto la stessa risposta, quindi guarda la sua. Ma non ho rubato la sua risposta! Ho appena dimenticato di guardare. Leggi la spiegazione e vedi se aiuta a capire il codice.

Sostituire

 setTimeout("postinsql(topicId)", 4000);

con

 setTimeout("postinsql(" + topicId + ")", 4000);

o meglio ancora, sostituire l'espressione stringa con una funzione anonima

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

MODIFICARE:

Il commento di Brownstone non è corretto, funzionerà come previsto, come dimostrato eseguendolo nella console Firebug

(function() {
  function postinsql(id) {
    console.log(id);
  }
  var topicId = 3
  window.setTimeout("postinsql(" + topicId + ")",4000); // outputs 3 after 4 seconds
})();

Nota che sono d'accordo con gli altri a cui dovresti evitare di passare una stringa in setTimeoutquanto ciò chiamerà eval()la stringa e invece passerà una funzione.

È possibile passare il parametro alla funzione di callback setTimeout come:

setTimeout (funzione, millisecondi, param1, param2, ...)

per esempio.

function myFunction() {
  setTimeout(alertMsg, 3000, "Hello");
}

function alertMsg(message) {
    alert(message)
}

La soluzione cross browser più semplice per supportare i parametri in setTimeout:

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

Se non ti dispiace non supportare IE 9 e versioni precedenti:

setTimeout(postinsql, 4000, topicId);

https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout

So che sono passati 10 anni da quando è stata posta questa domanda, ma comunque, se hai fatto scorrere fino a qui, suppongo che stai ancora affrontando qualche problema. La soluzione di Meder Omuraliev è la più semplice e può aiutare la maggior parte di noi, ma per coloro che non vogliono avere alcun legame, eccola qui:

1. Utilizzare Param per setTimeout

setTimeout(function(p){
//p == param1
},3000,param1);

2. Usa espressione funzione invocata immediatamente (IIFE)

let param1 = 'demon';
setTimeout(function(p){
    // p == 'demon'
},2000,(function(){
    return param1;
})()
);

3. Soluzione alla domanda

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

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

So che è vecchio ma volevo aggiungere il mio (preferito) sapore a questo.

Penso che un modo abbastanza leggibile per raggiungere questo obiettivo sia passare topicIda una funzione, che a sua volta usa l'argomento per fare riferimento all'ID argomento internamente. Questo valore non cambierà anche se topicIdall'esterno verrà modificato poco dopo.

var topicId = xmlhttp.responseText;
var fDelayed = function(tid) {
  return function() {
    postinsql(tid);
  };
}
setTimeout(fDelayed(topicId),4000);

o corto:

var topicId = xmlhttp.responseText;
setTimeout(function(tid) {
  return function() { postinsql(tid); };
}(topicId), 4000);

La risposta di David Meister sembra occuparsi dei parametri che possono cambiare immediatamente dopo la chiamata a setTimeout () ma prima che venga chiamata la funzione anonima. Ma è troppo ingombrante e non molto evidente. Ho scoperto un modo elegante di fare praticamente la stessa cosa usando IIFE (espressione di funzione immediatamente invitata).

Nell'esempio seguente, la currentListvariabile viene passata all'IIFE, che la salva nella sua chiusura, fino a quando non viene invocata la funzione ritardata. Anche se la variabile currentListcambia immediatamente dopo il codice mostrato, setInterval()farà la cosa giusta.

Senza questa tecnica IIFE, la setTimeout()funzione verrà sicuramente chiamata per ogni h2elemento nel DOM, ma tutte quelle chiamate vedranno solo il valore di testo dell'ultimo h2 elemento.

<script>
  // Wait for the document to load.
  $(document).ready(function() {
  $("h2").each(function (index) {

    currentList = $(this).text();

    (function (param1, param2) {
        setTimeout(function() {
            $("span").text(param1 + ' : ' + param2 );
        }, param1 * 1000);

    })(index, currentList);
  });
</script>

In generale, se è necessario passare una funzione come richiamata con parametri specifici, è possibile utilizzare le funzioni di ordine superiore. Questo è piuttosto elegante con ES6:

const someFunction = (params) => () => {
  //do whatever
};

setTimeout(someFunction(params), 1000);

O se someFunctionè il primo ordine:

setTimeout(() => someFunction(params), 1000); 

Si noti che il motivo topicId "non è stato definito" per il messaggio di errore è che esisteva come variabile locale quando è stato eseguito setTimeout, ma non quando si è verificata la chiamata ritardata a postinsql. La durata variabile è particolarmente importante a cui prestare attenzione, specialmente quando si prova qualcosa come passare "questo" come riferimento a un oggetto.

Ho sentito che puoi passare topicId come terzo parametro alla funzione setTimeout. Non sono stati forniti molti dettagli, ma ho abbastanza informazioni per farlo funzionare ed ha successo in Safari. Non so cosa significano per "errore di millisecondi". Controllalo qui:

http://www.howtocreate.co.uk/tutorials/javascript/timers

Come ho risolto questo stadio?

proprio così :

setTimeout((function(_deepFunction ,_deepData){
    var _deepResultFunction = function _deepResultFunction(){
          _deepFunction(_deepData);
    };
    return _deepResultFunction;
})(fromOuterFunction, fromOuterData ) , 1000  );

setTimeout attendo un riferimento a una funzione, quindi l'ho creato in una chiusura, che interpreta i miei dati e restituisce una funzione con una buona istanza dei miei dati!

Forse puoi migliorare questa parte:

_deepFunction(_deepData);

// change to something like :
_deepFunction.apply(contextFromParams , args); 

L'ho testato su Chrome, Firefox e Internet Explorer e funziona bene, non conosco le prestazioni ma avevo bisogno che funzionasse.

un test di esempio:

myDelay_function = function(fn , params , ctxt , _time){
setTimeout((function(_deepFunction ,_deepData, _deepCtxt){
            var _deepResultFunction = function _deepResultFunction(){
                //_deepFunction(_deepData);
                _deepFunction.call(  _deepCtxt , _deepData);
            };
        return _deepResultFunction;
    })(fn , params , ctxt)
, _time) 
};

// the function to be used :
myFunc = function(param){ console.log(param + this.name) }
// note that we call this.name

// a context object :
myObjet = {
    id : "myId" , 
    name : "myName"
}

// setting a parmeter
myParamter = "I am the outer parameter : ";

//and now let's make the call :
myDelay_function(myFunc , myParamter  , myObjet , 1000)

// this will produce this result on the console line :
// I am the outer parameter : myName

Forse puoi modificare la firma per renderla più conforme:

myNass_setTimeOut = function (fn , _time , params , ctxt ){
return setTimeout((function(_deepFunction ,_deepData, _deepCtxt){
            var _deepResultFunction = function _deepResultFunction(){
                //_deepFunction(_deepData);
                _deepFunction.apply(  _deepCtxt , _deepData);
            };
        return _deepResultFunction;
    })(fn , params , ctxt)
, _time) 
};

// and try again :
for(var i=0; i<10; i++){
   myNass_setTimeOut(console.log ,1000 , [i] , console)
}

E infine per rispondere alla domanda originale:

 myNass_setTimeOut( postinsql, 4000, topicId );

Spero che possa aiutare!

ps: scusa ma l'inglese non è la mia lingua madre!

funziona in tutti i browser (IE è una strana palla)

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

se vuoi passare una variabile come param, prova questo

se il requisito è funzione e var come parametri quindi provare questo

setTimeout((param1,param2) => { 
     alert(param1 + param2);
     postinsql(topicId);
},2000,'msg1', 'msg2')

se il requisito è solo una variabile come parametro allora prova questo

setTimeout((param1,param2) => { alert(param1 + param2) },2000,'msg1', 'msg2')

Puoi provarlo con ES5 ed ES6

Puoi provare la funzionalità predefinita di 'apply ()' come questa, puoi passare più numero di argomenti come requisito nell'array

function postinsql(topicId)
{
  //alert(topicId);
}
setTimeout(
       postinsql.apply(window,["mytopic"])
,500);

setTimeout fa parte del DOM definito da WHAT WG.

https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html

Il metodo che desideri è: -

handle = self.setTimeout( handler [, timeout [, arguments... ] ] )

Pianifica un timeout per l'esecuzione del gestore dopo il timeout millisecondi. Qualsiasi argomento viene passato direttamente al gestore.

setTimeout(postinsql, 4000, topicId);

Apparentemente, in IE10 sono supportati argomenti extra. In alternativa, puoi usare setTimeout(postinsql.bind(null, topicId), 4000);, tuttavia passare argomenti extra è più semplice ed è preferibile.

Factoide storico: ai tempi di VBScript, in JScript, il terzo parametro di setTimeout era il linguaggio, come una stringa, che era impostato per default su "JScript" ma con l'opzione di usare "VBScript". https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/aa741500(v%3Dvs.85)

@Jiri Vetyska grazie per il post, ma c'è qualcosa di sbagliato nel tuo esempio. Avevo bisogno di passare il bersaglio che è sospeso (questo) a una funzione scaduta e ho provato il tuo approccio. Testato in IE9 - non funziona. Ho anche fatto alcune ricerche e sembra che, come indicato qui, il terzo parametro sia il linguaggio di script utilizzato. Nessuna menzione di parametri aggiuntivi.

Quindi, ho seguito la risposta di @ meder e ho risolto il mio problema con questo codice:

$('.targetItemClass').hover(ItemHoverIn, ItemHoverOut);

function ItemHoverIn() {
 //some code here
}

function ItemHoverOut() {
    var THIS = this;
    setTimeout(
        function () { ItemHoverOut_timeout(THIS); },
        100
    );
}
function ItemHoverOut_timeout(target) {
    //do something with target which is hovered out
}

Spero che questo sia utile per qualcun altro.

Poiché esiste un problema con il terzo parametro optonale in IE e l'utilizzo di chiusure ci impedisce di modificare le variabili (ad esempio in un ciclo) e di ottenere comunque il risultato desiderato, suggerisco la seguente soluzione.

Possiamo provare a usare la ricorsione in questo modo:

var i = 0;
var hellos = ["Hello World1!", "Hello World2!", "Hello World3!", "Hello World4!", "Hello World5!"];

if(hellos.length > 0) timeout();

function timeout() {                
    document.write('<p>' + hellos[i] + '<p>');
    i++;
    if (i < hellos.length)
        setTimeout(timeout, 500);
}

Dobbiamo assicurarci che nient'altro cambi queste variabili e che scriviamo una condizione di ricorsione adeguata per evitare la ricorsione infinita.

// Queste sono tre risposte molto semplici e concise:

function fun() {
    console.log(this.prop1, this.prop2, this.prop3);
}

let obj = { prop1: 'one', prop2: 'two', prop3: 'three' };

let bound = fun.bind(obj);

setTimeout(bound, 3000);

 // or

function funOut(par1, par2, par3) {

  return function() { 

    console.log(par1, par2, par3);

  }
};

setTimeout(funOut('one', 'two', 'three'), 5000);

 // or

let funny = function(a, b, c) { console.log(a, b, c); };

setTimeout(funny, 2000, 'hello', 'worldly', 'people');

Rispondere alla domanda ma con una semplice funzione di aggiunta con 2 argomenti.

var x = 3, y = 4;

setTimeout(function(arg1, arg2) { 
      delayedSum(arg1, arg2);
}(x, y), 1000);

function delayedSum(param1, param2) {
     alert(param1 + param2); // 7
}

È necessario rimuovere le virgolette dalla setTimeOutchiamata della funzione in questo modo:

setTimeout(postinsql(topicId),4000);

Penso che tu voglia:

setTimeout("postinsql(" + topicId + ")", 4000);

// Queste sono tre risposte molto semplici e concise:

function fun() {
    console.log(this.prop1, this.prop2, this.prop3);
}

let obj = { prop1: 'one', prop2: 'two', prop3: 'three' };

let bound = fun.bind(obj);

setTimeout(bound, 3000);

 // or

function funOut(par1, par2, par3) {

  return function() { 

    console.log(par1, par2, par3);

  }
};

setTimeout(funOut('one', 'two', 'three'), 5000);

 // or

let funny = function(a, b, c) { console.log(a, b, c); };

setTimeout(funny, 2000, 'hello', 'worldly', 'people');