何时需要JS加载所有模块

When is requireJS done loading all modules

本文关键字：模块 加载 JS 何时需      更新时间：2024-05-06

在触发事件之前，我想等待所有requireJS模块完成加载。有没有一个事件，或者一种方法来监听我的所有requireJS模块以完成加载？

详细信息：

我正在尝试将自定义维度添加到我的谷歌分析中，然后发送页面视图。如果我设置了相同的维度，这在所有页面上都很容易做到，但在我的一些requireJS模块中，我想在页面视图之前更改维度。

我有我的模板javascript，它在每个页面上运行，我希望它能做到：

LISTEN_FOR_MODULES_TO_LOAD(function() {
  $(document).trigger('set-your-analytics-dimensions-yall');
  ga('send', 'pageview');
});

然后在我的一些子页面上，我有一些模块在做：

$(document).on('set-your-analytics-dimensions-yall', function() {
  ga('set', 'dimension');
});

我希望流程是：

  1. 收听我的所有模块以完成加载
  2. 要求其他模块设置其尺寸和其他值
  3. 设置页面视图

问题是，我没有办法监听要加载的所有requirejs模块。

我考虑过的事情：

DOM就绪

这不起作用，因为DOM Ready可以在加载所有JavaScript模块之前或之后激发。

window.onload

这是不可靠的，可能会多次开火。如果10分钟后将图像添加到页面中，则可以再次启动。如果外部资源从未加载，则此事件将永远不会激发。

有没有我错过的选项？或者我完全错过了requireJS的内容？

这个问题已经存在两年多了，但当我遇到同样的问题时，它是我在SO上发现的唯一相关问题。我最终找到了一个适合我的答案。以下是一些背景：我有一个动态生成的页面，有多个不同数量的页面部分，其中可能包括require.js加载的模块。例如，想象一个页面有一个可变数量的瓦片，每个瓦片都可以使用require加载脚本。现在，当所有的tile都被加载后，我想运行一些其他的javascript。但是，如何判断require.js何时加载完所有内容，包括可能作为子模块加载的模块？

查看require.js代码，我发现它包含一个注册表，它似乎是挂起的加载及其回调的列表。因此，当注册表为空时，require.js就完成了加载和运行回调。至少它看起来是这样的，这对我来说很有效

function run_final_action($) {
    if ($.isEmptyObject(require.s.contexts._.registry)) {
        do_final_action();
    }
    else {
        setTimeout(run_final_action, 100);
    }
}
require( ['jquery'], function ($) { run_final_action($) } );

这里我使用jquery是因为我已经在页面中加载了它，但实际上并没有必要。基本思想只是检查注册表中requirejs（名为"_"）中的默认上下文，当它为空时，这意味着requirejs没有要加载的挂起脚本或要运行的回调。无论如何，这适用于我的用例。

相关文章：