Close submenu with setTimeout

Question

Using jQuery to hide a sub-menu on mouseleave, everything works fine, but when I try to use setTimeout the function doesn't work.

This is my code without setTimeout

$( "li.menu-item" ).hover(function() {  // mouse enter
  $( this ).find( ".sub-menu" ).show(); // display child
}, function(){ // mouse leave
  $( this ).find( ".sub-menu" ).hide(); 
});

And with setTimeout:

$( "li.menu-item" ).hover(function() {  // mouse enter
  $( this ).find( ".sub-menu" ).show(); // display child
}, function(){ // mouse leave
  setTimeout(function () {
    $( this ).find( ".sub-menu" ).hide();
  }, 2000);            
});

The setTimeout function is working, if I insert an alert inside, the execution is with 2 seconds delay.

Thank You.

This is because of `this`. Take a look at : http://stackoverflow.com/questions/2130241/pass-correct-this-context-to-settimeout-callback — antoinestv, Dec 10 '15 at 12:56

score 1 · Answer 1 · edited Sep 01 '17 at 13:45

1

I think the problem that $(this) will not read inside setTimeout()

$( "li.menu-item" ).hover(function() {  // mouse enter
  $( this ).find( ".sub-menu" ).show(); // display child
}, function(){ // mouse leave
  var ThisIt = $(this);    
  setTimeout(function () {
    ThisIt.find( ".sub-menu" ).hide();
  }, 2000);
});

edited Sep 01 '17 at 13:45

Shiladitya

12,003
15
25
38

answered Dec 10 '15 at 12:56

Mohamed-Yousef

23,946
3
19
28

1

@AritzMadariaga glad it helped .. Good Luck :) – Mohamed-Yousef Dec 10 '15 at 12:59

score 0 · Answer 2 · answered Dec 10 '15 at 13:00

0

Within setTimeout this has a different context, so you cannot target on "sub-menu". Keep a reference of this before setTimeout and use that to reference "sub-menu" inside setTimeout.

answered Dec 10 '15 at 13:00

koninos

4,969
5
28
47

Close submenu with setTimeout

2 Answers2