Pass $(this) into setTimeout function in mouseover

Question

I am trying to show a div of information on a bar graph if the user hovers over the bar for a second. The answers on this site have gotten me to this point

var timer;
$(".session_hover").on({
     'mouseover': function () {
          timer = setTimeout(function () {
              $(this).children('.session_info').css({'top':175,'right':20}).fadeIn('fast');
          }, 1000);
     },
     'mouseout' : function () {
          clearTimeout(timer);
     }
});

The above code works when I replace $(this) with $(".session_hover") but then, of course it triggers all the other $(".session_hover") on the page.

How can I pass $(this) into my setTimeout function so that it only applies to the child element of the div I am hovering over?

Thanks for your help!

the 'that = this' trend really anoys me, why can't it be given the name of what it is !! : ) — Rob Sedgwick, Feb 18 '14 at 22:37

p.s.w.g · Accepted Answer · 2014-02-18T22:39:16.927

10

Try creating a closure around a variable to capture $(this), and then use it in your function:

 'mouseover': function () {
      var $this = $(this);
      timer = setTimeout(function () {
          $this.children('.session_info').css({'top':175,'right':20}).fadeIn('fast');
      }, 1000);
 },

Note that in modern browsers, you can also provide this as a parameter to setTimeout, like this:

 'mouseover': function () {
      timer = setTimeout(function (t) {
          $(t).children('.session_info').css({'top':175,'right':20}).fadeIn('fast');
      }, 1000, this);
 },

However, if you want this to work in IE < 9, you need to use one of the polyfill techniques described in this MDN article.

edited Feb 18 '14 at 22:39

answered Feb 18 '14 at 22:34

p.s.w.g

146,324
30
291
331

I like the use of `closure` and `$this` – xpy Feb 18 '14 at 22:36
+1 for not only using the variable name `$this` but mentioning the new way for `setTimeout` – Fresheyeball Feb 18 '14 at 22:40
1

Never knew you could pass context to setTimeout like that. Great feature! – Brandon Boone Feb 18 '14 at 22:40
just realised what you mean there Brandon, yes nice! – Rob Sedgwick Feb 18 '14 at 22:50

Brandon Boone · Answer 2 · 2014-02-19T00:55:31.377

You need to hold a reference to this outside the setTimeout.

var timer;
$(".session_hover").on({
     'mouseover': function () {
          var ctx = this;
          timer = setTimeout(function () {
              $(ctx).children('.session_info').css({'top':175,'right':20}).fadeIn('fast');
          }, 1000);
     },
     'mouseout' : function () {
          clearTimeout(timer);
     }
});

Another alternative is to use bind which is part of ECMAScript 5 (IE9+).

var timer;
$(".session_hover").on({
     'mouseover': function () {
          timer = setTimeout((function () {
              $(this).children('.session_info').css({'top':175,'right':20}).fadeIn('fast');
          }).bind(this), 1000);
     },
     'mouseout' : function () {
          clearTimeout(timer);
     }
});

Here's a demo using Bind

score 2 · Answer 3 · answered Feb 18 '14 at 22:34

Like this:

var timer;
$(".session_hover").on({
     var self = this;
     'mouseover': function () {
          timer = setTimeout(function () {
              $(self).children('.session_info').css({'top':175,'right':20}).fadeIn('fast');
          }, 1000);
     },
     'mouseout' : function () {
          clearTimeout(timer);
     }
});

Pass $(this) into setTimeout function in mouseover

3 Answers3