0

我有一个框架，可以在广告滚动到视口时延迟加载广告。当页面加载时，我会检查哪些在视图中并加载它们。如果它们不在视图中，我会创建一个滚动事件并为每个事件命名空间，以便我可以单独绑定和取消绑定它们：

if (adIsInView("ad1") == false) { 
    $(document).on("scroll.ad1", function() {
        if (adIsInView("ad1") == true) {
            displayAd("ad1");
            $(document).off("scroll.ad1");
        } 
    });
}

这样就很容易设置scroll.ad1、scroll.ad2等，分别绑定和解绑它们。

这是我的代码中唯一依赖 jQuery 的部分。我不想加载一个 50 KB 的文件，这样我就可以拥有命名空间的事件。如何使用 addEventListener 和 removeEventListener 做到这一点？显然我不能只使用

window.removeEventListener("scroll");

因为这会取消绑定我所有的滚动事件，并且命名空间（“scroll.ad1”）本身并不存在。

我还没有找到关于这个确切主题的任何其他帖子。我听说一些人提到 jQuery 源代码通过将事件存储在对象中来创建命名空间，但我不确定它是如何工作的。有任何想法吗？

4

2 回答 2

1

您可以绑定和取消绑定特定的处理程序。

if (adIsInView("ad1") == false) {
    var ad1_listener = function() {
        if (adIsInView("ad1") == true) {
            displayAd("ad1");
            window.removeEventListener("scroll", ad1_listener);
        } 
    }
    window.addEventListener("scroll", ad1_listener);
}

您可以更进一步并执行以下操作：

function register_ad(ad) {
    function listener() {
        if (adIsInView(ad) === true) {
            displayAd(ad);
            window.removeEventListener("scroll", listener);
        } 
    }
    window.addEventListener("scroll", listener);
}

if (adIsInView("ad1") === false) {
    register_ad("ad1");
}
于 2015-03-21T01:44:27.743 回答
0

您正在寻找支持命名空间的 PubSub JavaScript 实现。

例如，快速谷歌搜索给出了这个https://jsperf.com/pubsub-js-vs-jquery-events/12。

于 2015-03-21T01:50:39.480 回答