Deactivate a JavaScript page-level event handler

Question

I have a class which I call via:

this.infiniteScroll = new gd.InfiniteScroll();

In this class it checks if user is at bottom of window.

Later on in my script I have no use for this infinite scroll script (as all data has been loaded). How can I delete it? or stop it from checking if user is at bottom of window?

Here's the infinite scroll class:

(function(){
"use strict";

var InfiniteScroll = function() {
    this.init();
};

var p = InfiniteScroll.prototype = gd.BaseClass.extend(gd.BaseClass);
p.BaseClass_init = p.init;

/*
 * Public properties
 */
p.canLoad = true;
p.cog;

/* 
 * Public methods
 */
p.init = function() {
    // Super
    this.BaseClass_init();

    // Init
    this.ready();

};

p.ready = function() {

    this._initInfiniteScroll();
};

p.loadRequested = function(){

    p.canLoad = false;
    console.log('show cog');
    $.event.trigger('loadRequested');

}

p.loadComplete = function(){

    p.canLoad = true;
    console.log('hide cog');
    console.log(p.canLoad);
}

p._initInfiniteScroll = function() {

    $(window).scroll(function(){  
        console.log('scroll!');
        if(($(window).scrollTop() == ($(document).height() - $(window).height())) && p.canLoad){

            p.loadRequested();

        }  
    });   

}


gd.InfiniteScroll = InfiniteScroll;
}(window));

the answer will depend on whether the `gd.InfiniteScroll` class has the ability to detach itself from the page. — Alnitak, Feb 06 '14 at 13:48
@Alnitak He's making a new reference to an object and wants to delete it later. Sounds identical. — Yuck, Feb 06 '14 at 13:49
@agconti Not a CSS class but an instance of a class - an object. — Yuck, Feb 06 '14 at 13:50
no, he's creating an object that is then automagically attaching itself to the DOM. "Deleting" it will require that object to remove its event handlers, and any other reference to it, at which point it'll get GCed. — Alnitak, Feb 06 '14 at 13:50
@panthro please attach a link to the documentation for that plugin — Alnitak, Feb 06 '14 at 13:52
@Alnitak And that's all covered in the related question if you read through the responses. — Yuck, Feb 06 '14 at 13:52
It's not a plugin, it's a class I wrote. Will update original question with it. — panthro, Feb 06 '14 at 13:54
Right, in which case you need to update that class with methods that allow it to de-register itself. There's no need to "delete" the object, per se. — Alnitak, Feb 06 '14 at 13:54

score 2 · Answer 1 · answered Feb 06 '14 at 13:49

Usually you could just delete this.infiniteScroll. But I assume that in this case it actually attaches some event handlers, which means this isn't enough.

If the library is written well, you will probably have a method to detach all event handlers, a desctructor function or something similar.

Alnitak · Accepted Answer · 2014-02-06T14:22:07.083

0

Just give your class a "deactivate" method that you can invoke as required:

p.deactivate = function() {
    $(window).off('scroll');
};

If you're utterly finished with the object you may also delete this.infiniteScroll to allow the garbage collector to reclaim the memory, but given how little memory this class takes there's little benefit in doing so.

NB: ideally you should "namespace" your event handlers so that you can deactivate your handlers independently of any others, e.g.:

$(window).on('scroll.infinite', ...);

and then subsequently:

$(window).off('scroll.infinite');

edited Feb 06 '14 at 14:22

answered Feb 06 '14 at 13:56

Alnitak

334,560
70
407
495

Thanks, this worked. Could you go in to a bit more detail about the namespacing. Im trying to integrate it with my code but it fails to work. – panthro Feb 06 '14 at 14:04
It's in the jQuery docs - http://api.jquery.com/on/ – Alnitak Feb 06 '14 at 14:07
downvoter, please explain? – Alnitak Feb 06 '14 at 14:20

plalx · Answer 3 · 2014-02-06T14:06:25.147

0

Without modifying the plugin code, you can probably just do:

this.infiniteScroll.canLoad = false;

EDIT:

Now that I know it's your own code, you can simply keep track of your listener function and provide a destruction mechanism that will remove the listener.

p._initInfiniteScroll = function() {

    $(window).scroll(this._scrollHandler = function(){  
        console.log('scroll!');
        if(($(window).scrollTop() == ($(document).height() - $(window).height())) && p.canLoad){

            p.loadRequested();

        }  
    });   

}

p.destroy = function () {
    $(window).off('scroll', this._scrollHandler);
    //you should probably call the destruction function of the parent class
    //if there's any.
};

Then just call this.infiniteScroll.destroy();

edited Feb 06 '14 at 14:06

answered Feb 06 '14 at 13:57

plalx

42,889
6
74
90

Yes, but then it will still check for this everytime the user scrolls. – panthro Feb 06 '14 at 13:59
1

@panthro True, but there's no other way without modifying the plugin. – plalx Feb 06 '14 at 14:00
It's not a plug in. It's code ive written so can mod it all I want. – panthro Feb 06 '14 at 14:01
@plalx I don't believe that's valid syntax for `.off` - you have to specify the event name, and (optionally) the event handler reference. – Alnitak Feb 06 '14 at 14:08
1

@Alnitak Yeah I corrected it already, careless mistake. It certainly did not deserve a downvote... – plalx Feb 06 '14 at 14:15
@plalx I didn't give you one, and if you're the one that downvoted my accepted answer because you believe I did then that's very petty. – Alnitak Feb 06 '14 at 14:23
That's natural, I got downvoted and my answer is similar to an upvoted one :P – SparK Feb 06 '14 at 19:46

Deactivate a JavaScript page-level event handler

3 Answers3