How can I pass a parameter to a setTimeout callback

Question

I have some JavaScript code that looks like  function statechangedPostQuestion         alert  quot statechangedPostQuestion quot      if  xmlhttp readyState  4          var topicId   xmlhttp responseText      setTimeout  quot postinsql topicId  quot  4000          function postinsql topicId        alert topicId      I get an error that topicId is not defined Everything was working before I used the setTimeout   function  I want my postinsql topicId  function to be called after some time  What should I do

User · Answer

In general  if you need to pass a function as a callback with specific parameters  you can use higher order functions  This is pretty elegant with ES6   const someFunction    params    gt       gt        do whatever     setTimeout someFunction params   1000     Or if someFunction is first order   setTimeout      gt  someFunction params   1000

User · Answer

The easiest cross browser solution for supporting parameters in setTimeout   setTimeout function         postinsql topicId      4000    If you don t mind not supporting IE 9 and lower   setTimeout postinsql  4000  topicId         https   developer mozilla org en-US docs Web API WindowTimers setTimeout

User · Answer

this works in all browsers  IE is an oddball   setTimeout   function x    return function             postinsql x             topicId    4000

User · Answer

Hobblin already commented this on the question  but it should be an answer really   Using Function prototype bind   is the cleanest and most flexible way to do this  with the added bonus of being able to set the this context    setTimeout postinsql bind null  topicId   4000     For more information see these MDN links  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

User · Answer

After doing some research and testing  the only correct implementation is   setTimeout yourFunctionReference  4000  param1  param2  paramN     setTimeout will pass all extra parameters to your function so they can be processed there   The anonymous function can work for very basic stuff  but within instance of a object where you have to use  this   there is no way to make it work  Any anonymous function will change  this  to point to window  so you will lose your object reference

User · Answer

I think you want   setTimeout  postinsql     topicId        4000

User · Answer

You have to remove quotes from your setTimeOut function call like this    setTimeout postinsql topicId  4000

User · Answer

My answer   setTimeout  function topicId      return function         postinsql topicId           topicId   4000     Explanation      The anonymous function created returns another anonymous function  This function has access to the originally passed topicId  so it will not make an error  The first anonymous function is immediately called  passing in topicId  so the registered function with a delay has access to topicId at the time of calling  through closures    OR  This basically converts to   setTimeout function       postinsql topicId      topicId inside higher scope  passed to returning function     4000     EDIT  I saw the same answer  so look at his  But I didn t steal his answer  I just forgot to look  Read the explanation and see if it helps to understand the code

User · Answer

The answer by David Meister seems to take care of parameters that may change immediately after the call to setTimeout   but before the anonymous function is called  But it s too cumbersome and not very obvious  I discovered an elegant way of  doing pretty much the same thing using IIFE  immediately inviked function expression    In the example below  the currentList variable is passed to the IIFE  which saves it in its closure  until the delayed function is invoked  Even if the variable currentList changes immediately after the code shown  the setInterval   will do the right thing   Without this IIFE technique  the setTimeout   function will definitely get called for each h2 element in the DOM  but all those calls will see only the text value of the last h2 element    lt script gt       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          lt  script gt

User · Answer

setTimeout function         postinsql topicId      4000    You need to feed an anonymous function as a parameter instead of a string  the latter method shouldn t even work per the ECMAScript specification but browsers are just lenient  This is the proper solution  don t ever rely on passing a string as a  function  when using setTimeout   or setInterval    it s slower because it has to be evaluated and it just isn t right   UPDATE   As Hobblin said in his comments to the question  now you can pass arguments to the function inside setTimeout using Function prototype bind     Example   setTimeout postinsql bind null  topicId   4000

User · Answer

As there is a problem with the third optonal parameter in IE and using closures prevents us from changing the variables  in a loop for example  and still achieving the desired result  I suggest the following solution   We can try using recursion like this   var i   0  var hellos     Hello World1     Hello World2     Hello World3     Hello World4     Hello World5      if hellos length  gt  0  timeout     function timeout                         document write   lt p gt     hellos i      lt p gt         i        if  i  lt  hellos length          setTimeout timeout  500       We need to make sure that nothing else changes these variables and that we write a proper recursion condition to avoid infinite recursion

User · Answer

How i resolved this stage    just like that    setTimeout  function  deepFunction   deepData       var  deepResultFunction   function  deepResultFunction               deepFunction  deepData              return  deepResultFunction     fromOuterFunction  fromOuterData     1000       setTimeout wait a reference to a function  so i created it in a closure  which interprete my data and return a function with a good instance of my data    Maybe you can improve this part     deepFunction  deepData       change to something like    deepFunction apply contextFromParams   args      I tested it on chrome  firefox and IE and it execute well  i don t know about performance but i needed it to be working   a sample test     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   Maybe you can change the signature to make it more complient    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 lt 10  i        myNass setTimeOut console log  1000    i    console      And finaly to answer the original question     myNass setTimeOut  postinsql  4000  topicId      Hope it can help     ps   sorry but english it s not my mother tongue

User · Answer

Replace    setTimeout  postinsql topicId    4000     with   setTimeout  postinsql     topicId        4000     or better still  replace the string expression with an anonymous function   setTimeout function      postinsql topicId      4000     EDIT   Brownstone s comment is incorrect  this will work as intended  as demonstrated by running this in the Firebug console   function       function postinsql id        console log id         var topicId   3   window setTimeout  postinsql     topicId       4000      outputs 3 after 4 seconds         Note that I m in agreeance with others that you should avoid passing a string to setTimeout as this will call eval   on the string and instead pass a function

User · Answer

You can try default functionality of  apply    something like this  you can pass more number of arguments as your requirement in the array    function postinsql topicId        alert topicId     setTimeout         postinsql apply window   mytopic     500

User · Answer

These are three very simple and concise answers   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

User · Answer

Jiri Vetyska thanks for the post  but there is something wrong in your example  I needed to pass the target which is hovered out  this  to a timed out function and I tried your approach  Tested in IE9 - does not work   I also made some research and it appears that as pointed here the third parameter is the script language being used  No mention about additional parameters   So  I followed  meder s answer and solved my issue with this code       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     Hope  this is usefull for someone else

User · Answer

This is a very old question with an already  correct  answer but I thought I d mention another approach that nobody has mentioned here  This is copied and pasted from the excellent underscore library     delay   function func  wait      var args   slice call arguments  2     return setTimeout function    return func apply null  args      wait        You can pass as many arguments as you d like to the function called by setTimeout and as an added bonus  well  usually a bonus  the value of the arguments passed to your function are frozen when you call setTimeout  so if they change value at some point between when setTimeout   is called and when it times out  well    that s not so hideously frustrating anymore     Here s a fiddle where you can see what I mean

User · Answer

I know it s old but I wanted to add my  preferred  flavour to this   I think a pretty readable way to achieve this is to pass the topicId to a function  which in turn uses the argument to reference the topic ID internally  This value won t change even if topicId in the outside will be changed shortly after   var topicId   xmlhttp responseText  var fDelayed   function tid      return function         postinsql tid          setTimeout fDelayed topicId  4000     or short   var topicId   xmlhttp responseText  setTimeout function tid      return function     postinsql tid        topicId   4000

User · Answer

if you want to pass variable as param lets try this  if requirement is function and var as parmas then try this  setTimeout  param1 param2    gt          alert param1   param2        postinsql topicId     2000  msg1    msg2     if requirement is only variables as a params then try this  x000D   x000D  setTimeout  param1 param2    gt    alert param1   param2    2000  msg1    msg2   x000D   x000D   x000D    You can try this with ES5 and ES6

User · Answer

You can pass the parameter to the setTimeout callback function as   setTimeout function  milliseconds  param1  param2        eg   function myFunction       setTimeout alertMsg  3000   Hello       function alertMsg message        alert message

User · Answer

I know its been 10 yrs since this question was asked  but still  if you have scrolled till here  i assume you re still facing some issue  The solution by Meder Omuraliev is the simplest one and may help most of us but for those who don t want to have any binding  here it is    Use Param for setTimeout   setTimeout function p     p    param1   3000 param1      Use Immediately Invoked Function Expression IIFE    let param1    demon   setTimeout function p          p     demon    2000  function        return param1             Solution to the question   function statechangedPostQuestion         alert  statechangedPostQuestion      if  xmlhttp readyState  4          setTimeout postinsql 4000  function            return xmlhttp responseText                    function postinsql topicId        alert topicId

User · Answer

Note that the reason topicId was  not defined  per the error message is that it existed as a local variable when the setTimeout was executed  but not when the delayed call to postinsql happened  Variable lifetime is especially important to pay attention to  especially when trying something like passing  this  as an object reference   I heard that you can pass topicId as a third parameter to the setTimeout function  Not much detail is given but I got enough information to get it to work  and it s successful in Safari  I don t know what they mean about the  millisecond error  though  Check it out here   http   www howtocreate co uk tutorials javascript timers

User · Answer

I recently came across the unique situation of needing to use a setTimeout in a loop  Understanding this can help you understand how to pass parameters to setTimeout   Method 1  Use forEach and Object keys  as per Sukima s suggestion   var testObject         prop1   test1       prop2   test2       prop3   test3      Object keys testObject  forEach function propertyName  i        setTimeout function             console log testObject propertyName           i   1000         I recommend this method   Method 2  Use 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   Method 3  Or if you can t use forEach or bind  use an IIFE   var i   0  for  var propertyName in testObject        setTimeout  function propertyName            return function                 console log testObject propertyName                      propertyName   i     1000       Method 4  But if you don t care about IE  lt  10  then you could use Fabio s suggestion   var i   0  for  var propertyName in testObject        setTimeout function propertyName            console log testObject propertyName           i     1000  propertyName       Method 5  ES6   Use a block scoped variable   let i   0  for  let propertyName in testObject        setTimeout      gt  console log testObject propertyName    i     1000       Though I would still recommend using Object keys with forEach in ES6

User · Answer

setTimeout is part of the DOM defined by WHAT WG   https   html spec whatwg org multipage timers-and-user-prompts html  The method you want is         handle   self setTimeout  handler    timeout    arguments               Schedules a timeout to run handler after timeout milliseconds  Any   arguments are passed straight through to the handler    setTimeout postinsql  4000  topicId     Apparently  extra arguments are supported in IE10  Alternatively  you can use setTimeout postinsql bind null  topicId   4000    however passing extra arguments  is simpler  and that s preferable    Historical factoid  In days of VBScript  in JScript  setTimeout s third parameter was the language  as a string  defaulting to  JScript  but with the option to use  VBScript   https   docs microsoft com en-us previous-versions windows internet-explorer ie-developer platform-apis aa741500 v 3Dvs 85

User · Answer

Answering the question but by a simple addition function with 2 arguments   var x   3  y   4   setTimeout function arg1  arg2           delayedSum arg1  arg2     x  y   1000    function delayedSum param1  param2         alert param1   param2      7

User · Answer

In modern browsers  the  setTimeout  receives a third parameter that is sent as parameter to the internal function at the end of the timer   Example    x000D   x000D  var hello    Hello World   x000D  setTimeout alert  1000  hello   x000D   x000D   x000D    More details    https   developer mozilla org en-US docs Web API WindowTimers setTimeout http   arguments callee info 2008 11 10 passing-arguments-to-settimeout-and-setinterval

User · Answer

Some answers are correct but convoluted   I am answering this again  4 years later  because I still run into overly complex code to solve exactly this question  There IS an elegant solution   First of all  do not pass in a string as the first parameter when calling setTimeout because it effectively invokes a call to the slow  eval  function   So how do we pass in a parameter to a timeout function  By using closure   settopic function topicid     setTimeout function          thanks to closure  topicid is visible here     postinsql topicid       4000          if  xhr readyState  4     settopic xhr responseText       Some have suggested using anonymous function when calling the timeout function   if  xhr readyState  4     setTimeout function        settopic xhr responseText       4000       The syntax works out  But by the time settopic is called  i e  4 seconds later  the XHR object may not be the same  Therefore it s important to pre-bind the variables

User · Answer

These are three very simple and concise answers   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

[javascript] How can I pass a parameter to a setTimeout() callback?

Examples related to javascript

Examples related to parameters

Examples related to callback

Examples related to settimeout