lost scope on function running inside setTimeout

Question

I'm having trouble getting the following function to fire properly. Everything works except that I think I lost scope from inside the setTimeout function. This is the JS:

function galContent(){
    var hovInt;
    $(".element").each(function(){
        $(this).on("mouseenter", function(){
            clearTimeout(hovInt);
            hovInt = setTimeout(function(){
                //following line not working...
                $(this).find(".elContent").slideDown();
            }, 300);
       });
       $(this).on("mouseleave", function(){
           $(this).find(".elContent").slideUp(); 
       });
    });
}

And the HTML:

<div class="element web">
    <div class="elImg">
        <img src="01.jpg" alt="" title="">
    </div>
    <div class="elContent">

   </div>
</div>

possible duplicate of [setTimeout and "this" in JavaScript](http://stackoverflow.com/questions/591269/settimeout-and-this-in-javascript) — Machavity, Dec 11 '14 at 23:10
Machavity - thanks but I don't think that is the same issue. — afthole, Dec 11 '14 at 23:33

Verhaeren · Accepted Answer · 2014-12-11T23:53:19.897

0

If the this is referencing another object inside setTimeout, then pass the referencer this way:

function galContent(){
    var hovInt;
    $(".element").each(function(i){
        $(this).on("mouseenter", function(){
            clearTimeout(hovInt);
            hovInt = setTimeout(function(){
                //following line not working...
                $(".element").eq(i).find(".elContent").slideDown();
            }, 300);
       });
       $(this).on("mouseleave", function(){
           $(".element").eq(i).find(".elContent").slideUp(); 
       });
    });
}

property index() could work too.

edited Dec 11 '14 at 23:53

answered Dec 11 '14 at 23:13

Verhaeren

1,661
9
10

I am trying to get a hidden element to SlideOut inside it's parent element on mouseenter. I wanted to add the setTimeout in there as a 'hover intent' feature. Without the setTimeout, the method works fine and fires the slideDown. However, once inside the setTimeout, it doesn't work, which makes me think the scope has changed from inside the setTimeout. – afthole Dec 11 '14 at 23:30
Verhaeren - I tried your suggestion but still nothing happens. I have also tried various combinations of: $(this).closest(".element").find(".elContent").slideDown(); with no luck... – afthole Dec 11 '14 at 23:31
If you use the console you'll see that `$(".element").eq(i)` as a sustitution of `$(this)` selects the right element with no problem, so if your code it's not working, must be something else. I provided you the answer about the `$(this)`. It seems to me that you, on the same event `mouseenter`, are setting a timeout and clearing at the same time. You should clear the time out when your `.elContent` element reaches the position you want. – Verhaeren Dec 11 '14 at 23:44
Thanks Verhaeren! I finally got your suggestion to work. I also moved the clearTimeout to the mouseout event which helps. Thanks again! – afthole Dec 11 '14 at 23:56
@afthole Glad of helping and that youve made it – Verhaeren Dec 11 '14 at 23:58

lost scope on function running inside setTimeout

1 Answers1