How to correctly pass this to my scrollhandler for the purposes of scope

Question

I am very new to this stuff, so my apologies for the basic nature of the question.

I have built a tiles display for my wiki which shows articles as tiles. I have navigation buttons on the side to let folks browse the tiles (the tile container is 500px high, each tile is 250px high, there can be 6 or 7 rows of tiles that are hidden from view).

To handle the updating of my navigation buttons, I use a scroll handler I bodged together from various other SO sources, thus:

var scrollTimer;
$(".rsg_testtiles_display_macro_container").on('scroll', function() {
clearTimeout(scrollTimer);
scrollTimer = setTimeout(function() {
    var RSTilesDisplayScrollResult = false;

    if (!RSTilesDisplayScrollResult) {
        $.each( $(".rsg_testtiles_display_macro_container .rsg_testtiles_display_surround[id]"),function(i,e) {
            if (checkRSTilesDisplayView($(e),false)) {
                updateRSTilesDisplayNavButton(false,e);
                RSTilesDisplayScrollResult = true;
                return false;
            }
        });
        if (!RSTilesDisplayScrollResult) {
            $.each( $(".rsg_testtiles_display_macro_container .rsg_testtiles_display_surround[id]"),function(i,e) {
                if (checkRSTilesDisplayView($(e),true)) {
                    updateRSTilesDisplayNavButton(true,e);
                    RSTilesDisplayScrollResult = true;
                    return false;
                }
            });
        }
    }
}, 250);
});

My question is about scope - if I have multiple of my tiles displays on the same page, how I can rewrite this so that I'm updating the correct display and not all of them or, in this case, none of them.

I have a sense that I need to pass $this into my nested function somehow, but that never seems to work.

I have tried the following:

var tilesParentContainer = $(this);
...
scrollTimer = setTimeout(function() {
...
tilesParentContainer.each( $(".rsg_testtiles_display...

and also tried this

scrollTimer = setTimeout(function(this) {

and I either get nothing or I get an Uncaught TypeError: b.apply is not a function, which I completely do not understand.

Many thanks in advance, it's been driving me mad all week.

I don't know a lot about `$(this)` in jQuery, but you do know that the value of `this` changes depending on how the function is called, right? Let's simplify your question: which object do you want to get/use and where in your code? — sjahan, Oct 31 '18 at 15:56
Convention is to use `self` (or `that` in some cases): `$(".rsg_testtiles_display_macro_container").on('scroll', function() { var self = this; ...` now `self` always refers to the macro container while `this` will change with inner anonymous functions (eg inside `$.each`) — freedomn-m, Nov 09 '18 at 17:03
Possible duplicate of [How do JavaScript closures work?](https://stackoverflow.com/questions/111102/how-do-javascript-closures-work) — freedomn-m, Nov 09 '18 at 17:04
The linked possible duplicate is looks daunting at first, but well worth reading all the way through the accepted answer. — freedomn-m, Nov 09 '18 at 17:05

score 0 · Accepted Answer · answered Nov 09 '18 at 17:00

I was able to find some answers to this elsewhere on SO.

I didn't know I could assign this to a properly-scoped variable and reuse it in the nested function.

For example, I created a var next to scrollTimer and then assigned this to it inside the first on function. I can then make proper reference to it using $(varName).whatever... throughout my nested function.

How to correctly pass this to my scrollhandler for the purposes of scope

1 Answers1