Javascript: Passing arguments to an inner setTimeOut function?

Question

I have a thumbnail scroller where I want to trigger some action only when the mouse is hovered for 3 seconds on thumbnails. I have the following code but the inner setTimeOut function is not getting the arguments from the outer function--the sourceURL console output gets 'undefined' error. But the 'hover' function I do see correct sourceURL value. Thanks in advance!

   var tOut;
   $('img.thumb').hover(function(){
      var sourceURL = $(this).attr('src');
      var lat = $(this).attr('lat');
      var lng = $(this).attr('lng');
      tOut = setTimeout(function(sourceURL,lat,lng){
      console.log(sourceURL);//undefined
      map.setView(new L.LatLng(lat, lng), (init_mapzoom+2));
    },3000);
   },function(){
     clearTimeout(tOut);
  });

No. The setTimeOut needs to get the arguments from the hover function. — IrfanClemson
– IrfanClemson, Commented Nov 14, 2014 at 15:20

Guffa · Accepted Answer · 2014-11-14 15:23:08Z

1

You don't need to pass the variables to the function. As the function is created in a scope where the variables exist, they are caught in the closure for the function so the function can use them even after the scope is gone:

var tOut;
$('img.thumb').hover(function(){
  var sourceURL = $(this).attr('src');
  var lat = $(this).attr('lat');
  var lng = $(this).attr('lng');
  tOut = setTimeout(function(){
    console.log(sourceURL);
    map.setView(new L.LatLng(lat, lng), (init_mapzoom+2));
  },3000);
},function(){
  clearTimeout(tOut);
});

answered Nov 14, 2014 at 15:23

Guffa

703k111 gold badges760 silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jonathan Lonowski · Accepted Answer · 2014-11-14 15:30:55Z

1

The function given to setTimeout doesn't have to receive them as arguments.

By also being defined within the .hover() function, it will have sourceURL, etc. in scope.

$('img.thumb').hover(function(){
  var sourceURL = $(this).attr('src');
  // ..

  tOut = setTimeout(function(){
    console.log(sourceURL);
    // ...
  }, 3000);
}, ...);

Using them again as named parameters will shadow the vars, so only the parameters are accessible within that function.

edited Nov 14, 2014 at 15:30

answered Nov 14, 2014 at 15:24

Jonathan Lonowski

124k35 gold badges203 silver badges202 bronze badges

1 Comment

IrfanClemson Over a year ago

Thanks! Would accept your Answer but Guffa's came first.

Collectives™ on Stack Overflow

Javascript: Passing arguments to an inner setTimeOut function?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related