Question

我想在触发事件之前等待所有的requireJS模块完成加载。是否有事件或方法来监听我的所有requireJS模块以完成加载？

细节：

我正在尝试向Google Analytics添加自定义维度，然后发送综合浏览量。如果我设置相同的尺寸，但在我的一些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');
});

我希望流程为：

收听所有模块以完成加载
要求其他模块设置尺寸和其他值
设置网页浏览

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

我考虑过的事情：

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

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

我有错过的选择吗？或者我完全错过requireJS的东西？

Answer 1

这个问题已经超过两年了，但是当我遇到同样的问题时，这是我在SO上找到的唯一相关问题。我最终找到了一个适合我的答案。这里有一些背景知识：我有一个动态生成的页面，有多个不同数量的页面部分，可能包含require.js加载的模块。例如，绘制具有可变数字图块的页面，并且每个图块可以使用require加载脚本。现在当加载所有图块时，我想运行其他一些javascript。但是你怎么知道require.js什么时候加载所有内容，包括可以作为子模块加载的模块？

查看require.js代码，我看到它包含一个注册表，它似乎是一个挂起的加载及其回调的列表。因此，当注册表为空时，require.js已完成加载并完成运行回调。至少看起来是这样，这对我有用。基本上在页面的底部（在require（）的任何其他调用之下），我添加了这个javascript：

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没有要加载的挂起脚本或要运行的回调。这无论如何都适用于我的用例。

什么时候需要JS完成加载所有模块

1 个答案: