Using 'this' in nested functions

Question

Wow.. to get real information about 'this' is not easy as google basically ignores the word.

The code opens an image from a database using the information from thumbnail.. the onlick works, and the hover code works, but I can't figure out how to get 'this' from the mouseenter to be used in the showModal function.

        function showModal() {
        $("body").css("overflow-y", "hidden");
        $(".small").removeClass("smallHover");
        $(".modal").fadeIn(200);

        var altLong = $(this).attr("alt");
        var altSplit = altLong.split("#");
        $(".picTitle").text(altSplit[0]);                                           
        var srclong = $(this).attr("src");
        var srcshort = srclong.split("_");
        var srcextension = srclong.split(".");      
        $(".big").attr("src", srcshort[0]+'.'+srcextension[1]); 
    }
    $(".small").click(showModal);

    var timer;
    $(".small").mouseenter(function() {
        timer = setTimeout(function(){
            $(this).showModal(); // **<--this is the line that doesnt work**
        }, 2000);
    }).mouseleave(function() {
        clearTimeout(timer);
    });

also if you could explain why you would use $(this) as a jquery object instead of just 'this' and how they differ, that would be great. Thanks in advance~!

score 3 · Accepted Answer · answered Oct 04 '17 at 09:49

There are two separate aspects to this.

Getting the right this in the setTimeout callback
Calling showModal with that this

#1 is addressed by this question's answers. You have several options, the simplest in this case (for now) probably being to use a variable:

$(".small").mouseenter(function() {
    var _this = this; // ***
    timer = setTimeout(function(){
        $(_this).showModal(); // ***
    }, 2000);
}).mouseleave(function() {
    clearTimeout(timer);
});

...but that code still won't work, because showModal isn't a property of jQuery objects, it's a standalone function. To call it with a specific this, you'd use Function.prototype.call:

$(".small").mouseenter(function() {
    var _this = this;
    timer = setTimeout(function(){
        showModal.call(_this); // ***
    }, 2000);
}).mouseleave(function() {
    clearTimeout(timer);
});

(Alternately, change showModal to accept the element as a parameter and then just pass it as an argument.)

More on this in this question's answers as well, as well as this (old) post on my anemic little blog.

Also this questions answer helps with the overall problem OP is experiencing: https://stackoverflow.com/questions/5889237/jquery-nested-this-references — Master Yoda, Oct 04 '17 at 09:52
Hooray! Thank you so much, I had tried making it a variable, and using call, but not together. Also thanks for the extra reading about 'this', it helped me understand why some of my other attempts didn't work either (specifically trying to access an attribute instead of executing the function on the reference) — Jarrett Onions, Oct 04 '17 at 10:07

score 0 · Answer 2 · answered Oct 04 '17 at 10:28

this will also work if you could change your showModel function like this :

 $.fn.showModal = function() { 
        $("body").css("overflow-y", "hidden");
        $(".small").removeClass("smallHover");
        $(".modal").fadeIn(200);
        ... 
     }

and inside timer method

 $(this).showModal();

Using 'this' in nested functions

2 Answers2