¿Cómo puedo pasar un parámetro a una devolución de llamada setTimeout ()?

Tengo un código JavaScript que se parece a:

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

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

Recibo un error que topicIdno está definido. Todo funcionaba antes de usar la setTimeout()función.

Quiero postinsql(topicId)que se llame mi función después de un tiempo. ¿Qué tengo que hacer?

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

Debe alimentar una función anónima como parámetro en lugar de una cadena, el último método ni siquiera debería funcionar según la especificación ECMAScript, pero los navegadores son indulgentes. Esta es la solución adecuada, nunca confíes en pasar una cadena como una 'función' al usar setTimeout()o setInterval(), es más lenta porque tiene que ser evaluada y simplemente no está bien.

ACTUALIZAR:

Como dijo Hobblin en sus comentarios a la pregunta, ahora puede pasar argumentos a la función dentro de setTimeout usando Function.prototype.bind().

Ejemplo:

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

En los navegadores modernos, el "setTimeout" recibe un tercer parámetro que se envía como parámetro a la función interna al final del temporizador.

Ejemplo:

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

Más detalles:

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

Después de investigar y probar, la única implementación correcta es:

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

setTimeout pasará todos los parámetros adicionales a su función para que puedan procesarse allí.

La función anónima puede funcionar para cosas muy básicas, pero dentro de un objeto en el que debe usar "esto", no hay forma de hacerlo funcionar. Cualquier función anónima cambiará "esto" para que apunte a la ventana, por lo que perderá su referencia de objeto.

Esta es una pregunta muy antigua con una respuesta ya "correcta", pero pensé en mencionar otro enfoque que nadie ha mencionado aquí. Esto se copia y pega de la excelente biblioteca de subrayado :

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

Puede pasar tantos argumentos como desee a la función llamada por setTimeout y como un bono adicional (bueno, generalmente un bono) el valor de los argumentos pasados ​​a su función se congela cuando llama a setTimeout, por lo que si cambian de valor en algún momento entre cuando se llama a setTimeout () y cuando se agota el tiempo de espera, bueno ... eso ya no es tan horriblemente frustrante :)

Aquí hay un violín donde puedes ver lo que quiero decir.

Recientemente me encontré con la situación única de la necesidad de usar un setTimeouten un bucle . Comprender esto puede ayudarlo a comprender cómo pasar parámetros a setTimeout.

Método 1

Uso forEachy Object.keys, según la sugerencia de Sukima :

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

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

Recomiendo este método

Método 2

Uso 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étodo 3

O si no puede usar forEacho bind, use un IIFE :

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

Método 4

Pero si no te importa IE <10, entonces podrías usar la sugerencia de Fabio :

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

Método 5 (ES6)

Use una variable de ámbito de bloque:

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

Aunque todavía recomendaría usar Object.keyscon forEachES6.

Hobblin ya comentó esto sobre la pregunta, ¡pero debería ser una respuesta realmente!

Usar Function.prototype.bind()es la forma más limpia y flexible de hacerlo (con la ventaja adicional de poder establecer el thiscontexto):

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

Para obtener más información, consulte estos enlaces de 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

Algunas respuestas son correctas pero complicadas.

Estoy respondiendo esto nuevamente, 4 años después, porque todavía me encuentro con un código demasiado complejo para resolver exactamente esta pregunta. Hay una solución elegante.

En primer lugar, no pase una cadena como primer parámetro cuando llame a setTimeout porque invoca efectivamente una llamada a la función lenta "eval".

Entonces, ¿cómo pasamos un parámetro a una función de tiempo de espera? Mediante el uso de cierre:

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

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

Algunos han sugerido usar la función anónima al llamar a la función de tiempo de espera:

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

La sintaxis funciona. Pero cuando se llama al settopic de tiempo, es decir, 4 segundos después, el objeto XHR puede no ser el mismo. Por lo tanto, es importante vincular previamente las variables .

Mi respuesta:

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

Explicación:

La función anónima creada devuelve otra función anónima. Esta función tiene acceso a la aprobada originalmente topicId, por lo que no cometerá un error. La primera función anónima se llama inmediatamente, pasando topicId, por lo que la función registrada con un retraso tiene acceso topicIden el momento de la llamada, a través de cierres.

O

Esto básicamente se convierte en:

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

EDITAR: Vi la misma respuesta, así que mira la suya. ¡Pero no robé su respuesta! Solo olvidé mirar. Lea la explicación y vea si ayuda a entender el código.

Reemplazar

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

con

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

o mejor aún, reemplace la expresión de cadena con una función anónima

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

EDITAR:

El comentario de Brownstone es incorrecto, esto funcionará según lo previsto, como se demuestra al ejecutar esto en la consola Firebug

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

Tenga en cuenta que estoy de acuerdo con otros a los que debe evitar pasar una cadena, setTimeoutya que esto invocará eval()la cadena y en su lugar pasará una función.

Puede pasar el parámetro a la función de devolución de llamada setTimeout como:

setTimeout (función, milisegundos, param1, param2, ...)

p.ej.

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

function alertMsg(message) {
    alert(message)
}

La solución de navegador cruzado más fácil para admitir parámetros en setTimeout:

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

Si no le importa no admitir IE 9 y versiones inferiores:

setTimeout(postinsql, 4000, topicId);

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

Sé que han pasado 10 años desde que se hizo esta pregunta, pero aún así, si te has desplazado hasta aquí, supongo que todavía tienes algún problema. La solución de Meder Omuraliev es la más simple y puede ayudarnos a la mayoría de nosotros, pero para aquellos que no quieren tener ningún enlace, aquí está:

1. Use Param para setTimeout

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

2. Usar expresión de función invocada inmediatamente (IIFE)

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

3. Solución a la pregunta

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

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

Sé que es viejo pero quería agregar mi sabor (preferido) a esto.

Creo que una forma bastante legible de lograr esto es pasarle topicIda una función, que a su vez usa el argumento para hacer referencia internamente al ID del tema. Este valor no cambiará incluso si topicIden el exterior se cambiará poco después.

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 respuesta de David Meister parece ocuparse de los parámetros que pueden cambiar inmediatamente después de la llamada a setTimeout () pero antes de que se llame a la función anónima. Pero es demasiado engorroso y no muy obvio. Descubrí una forma elegante de hacer más o menos lo mismo usando IIFE (expresión de función invitada inmediatamente).

En el siguiente ejemplo, la currentListvariable se pasa al IIFE, que la guarda en su cierre, hasta que se invoca la función retrasada. Incluso si la variable currentListcambia inmediatamente después del código que se muestra, setInterval()hará lo correcto.

Sin esta técnica IIFE, setTimeout()definitivamente se llamará a la función para cada h2elemento en el DOM, pero todas esas llamadas verán solo el valor de texto del último 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>

En general, si necesita pasar una función como devolución de llamada con parámetros específicos, puede usar funciones de orden superior. Esto es bastante elegante con ES6:

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

setTimeout(someFunction(params), 1000);

O si someFunctiones de primer orden:

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

Tenga en cuenta que la razón por la que no se definió topicId según el mensaje de error es que existía como una variable local cuando se ejecutó setTimeout, pero no cuando ocurrió la llamada retrasada a postinsql. La vida útil variable es especialmente importante a la que se debe prestar atención, especialmente cuando se intenta algo como pasar "esto" como referencia de objeto.

Escuché que puede pasar topicId como tercer parámetro a la función setTimeout. No se dan muchos detalles, pero obtuve suficiente información para que funcione, y tiene éxito en Safari. Sin embargo, no sé qué significan sobre el "error de milisegundos". Compruébalo aquí:

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

¿Cómo resolví esta etapa?

solo así:

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

¡setTimeout espera una referencia a una función, así que la creé en un cierre, que interpreta mis datos y devuelve una función con una buena instancia de mis datos!

Quizás puedas mejorar esta parte:

_deepFunction(_deepData);

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

Lo probé en Chrome, Firefox e IE y se ejecuta bien, no sé sobre rendimiento, pero necesitaba que funcionara.

una prueba de muestra:

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

Tal vez pueda cambiar la firma para que sea más adecuada:

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

Y finalmente para responder la pregunta original:

 myNass_setTimeOut( postinsql, 4000, topicId );

Espero que pueda ayudar!

PD: lo siento, pero el inglés no es mi lengua materna.

esto funciona en todos los navegadores (IE es un bicho raro)

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

si quieres pasar variable como param intentemos esto

si el requisito es function y var como parmas, intente esto

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

si el requisito es solo variable como un parámetro, intente esto

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

Puedes probar esto con ES5 y ES6

Puede probar la funcionalidad predeterminada de 'apply ()' algo como esto, puede pasar más cantidad de argumentos como su requisito en la matriz

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

setTimeout es parte del DOM definido por WHAT WG.

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

El método que desea es: -

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

Programa un tiempo de espera para ejecutar el controlador después del tiempo de espera milisegundos. Cualquier argumento se pasa directamente al controlador.

setTimeout(postinsql, 4000, topicId);

Aparentemente, los argumentos adicionales son compatibles con IE10. Alternativamente, puede usar setTimeout(postinsql.bind(null, topicId), 4000);, sin embargo, pasar argumentos adicionales es más simple, y eso es preferible.

Factoid histórico: en días de VBScript, en JScript, el tercer parámetro de setTimeout era el lenguaje, como una cadena, por defecto a "JScript" pero con la opción de usar "VBScript". https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/aa741500(v%3Dvs.85)

@Jiri Vetyska gracias por la publicación, pero hay algo mal en tu ejemplo. Necesitaba pasar el objetivo que está suspendido (esto) a una función de tiempo de espera agotado y probé su enfoque. Probado en IE9: no funciona. También investigué un poco y parece que, como se señaló aquí, el tercer parámetro es el lenguaje de script que se está utilizando. No se mencionan parámetros adicionales.

Entonces, seguí la respuesta de @ meder y resolví mi problema con este código:

$('.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
}

Espero que esto sea útil para alguien más.

Como hay un problema con el tercer parámetro optonal en IE y el uso de cierres nos impide cambiar las variables (en un bucle, por ejemplo) y aún lograr el resultado deseado, sugiero la siguiente solución.

Podemos intentar usar la recursividad de esta manera:

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

Necesitamos asegurarnos de que nada más cambie estas variables y que escribamos una condición de recursión adecuada para evitar una recursión infinita.

// Estas son tres respuestas muy simples y concisas:

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

Responde la pregunta pero con una simple función de suma con 2 argumentos.

var x = 3, y = 4;

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

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

Debe eliminar las comillas de su setTimeOutllamada de función de esta manera:

setTimeout(postinsql(topicId),4000);

Creo que quieres:

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

// Estas son tres respuestas muy simples y concisas:

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