停用 JavaScript 页面级事件处理程序 [重复]

Posted 2023-02-21

【中文标题】停用 JavaScript 页面级事件处理程序 [重复]

【英文标题】：Deactivate a JavaScript page-level event handler [duplicate]

【发布时间】：2014-03-03 12:11:14

【问题描述】：

我有一门课，我通过以下方式调用：

this.infiniteScroll = new gd.InfiniteScroll();

在这个类中，它检查用户是否在窗口底部。

稍后在我的脚本中，我不再使用这个无限滚动脚本（因为所有数据都已加载）。我怎样才能删除它？还是阻止它检查用户是否在窗口底部？

这是无限滚动类：

(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));

【问题讨论】：

答案将取决于gd.InfiniteScroll 类是否有能力将自己从页面中分离出来。

库支持吗？检查 api。

@Yuck 不是远程复制

@Alnitak 他正在对一个对象进行新的引用，并希望稍后将其删除。听起来一模一样。

不，他正在创建一个对象，然后它会自动将自身附加到 DOM。 “删除”它将要求该对象删除其事件处理程序以及对它的任何其他引用，此时它将被 GCed。

【参考方案1】：

通常你可以delete this.infiniteScroll。但我假设在这种情况下它实际上附加了一些事件处理程序，这意味着这还不够。

如果库编写得好，您可能会有一个分离所有事件处理程序的方法、一个析构函数或类似的东西。

【参考方案2】：

只需给你的类一个“deactivate”方法，你可以根据需要调用它：

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

如果您完全完成了该对象，您也可以delete this.infiniteScroll 允许垃圾收集器回收内存，但考虑到这个类占用的内存很少，这样做没有什么好处。

注意：理想情况下，您应该“命名空间”您的事件处理程序，以便您可以独立于任何其他处理程序停用您的处理程序，例如：

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

然后：

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

【讨论】：

谢谢，这行得通。您能否详细介绍一下命名空间。我试图将它与我的代码集成，但它无法工作。

它在 jQuery 文档中 - api.jquery.com/on

downvoter，请解释一下？

【参考方案3】：

不修改插件代码，你大概可以这样做：

this.infiniteScroll.canLoad = false;

编辑：

现在我知道这是你自己的代码，你可以简单地跟踪你的监听器函数并提供一个销毁机制来移除监听器。

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.
;

那就拨打this.infiniteScroll.destroy();

【讨论】：

是的，但是每次用户滚动时它仍然会检查这个。

@panthro 是的，但是不修改插件就没有别的办法了。

它不是插件。它是我编写的代码，所以我可以随意修改它。

@plalx 我不认为这是 .off 的有效语法 - 您必须指定事件名称和（可选）事件处理程序引用。

@Alnitak 是的，我已经纠正了，粗心的错误。它当然不值得一票否决...