Question

我有脚本需要等待某些条件在运行之前得到满足 - 例如等待加载另一个脚本，或者等待创建数据对象。

如何管理此类依赖项？我能想到的唯一方法是使用setTimeout以短间隔循环并检查函数或对象的存在。还有更好的方法吗？

如果setTimeout是唯一的选择，那么轮询我的页面的合理时间间隔是多少？ 50毫秒，100毫秒？

[编辑]我的一些脚本从页面本身或从Web服务收集数据，有时来自多个源的组合。在页面加载之前或之后，数据可以随时就绪。其他脚本呈现数据（例如构建图表）。

[更新]感谢有用的答案。我同意我不应该重新发明轮子，但如果我使用一个库，至少我想了解背后的逻辑（它只是一个花哨的超时吗？）来尝试预测性能对我的页面的影响。< / p>

Answer 1

您可以在正在加载的脚本末尾进行类似loaded(xyz);的函数调用。此函数将在别处定义，并设置为基于xyz的值调用已注册的回调。 xyz可以是任何东西，用于标识脚本的简单字符串，或复杂的对象或函数等等。

或者只使用jQuery.getScript(url [, success(data, textStatus)] )。

Answer 2

对于彼此依赖的脚本，请使用RequireJS等模块系统。

要远程加载数据，请使用回调，例如

$.get("/some/data", "json").then(function (data) {
    // now i've got my data; no polling needed.
});

以下是这两个组合的示例：

// renderer.js
define(function (require, exports, module) {
    exports.render = function (data, element) {
        // obviously more sophisticated in the real world.
        element.innerText = JSON.stringify(data);
    };
});

// main.js
define(function (require, exports, module) {
    var renderer = require("./renderer");

    $(function () {
        var elToRenderInto = document.getElementById("#render-here");

        $("#fetch-and-render-button").on("click", function () {
            $.get("/some/data", "json").then(function (data) {
                renderer.render(data, elToRenderTo);
            });
        });
    });
});

Answer 3

这种事情有很多框架。

我正在使用Backbone http://documentcloud.github.com/backbone/

朋友们也推荐了knockout.js http://knockoutjs.com/

这些都使用MVC模式在模型加载数据后更新视图

[update]我认为在最基本的层面上，这些库使用回调函数和事件监听器来更新页面的各个部分。

e.g。

model1.loadData = function(){
    $.get('http://example.com/model1', function(response){
        this.save(response);
        this.emit('change');
    });
}

model1.bind('change',view1.update);
model1.bind('change',view2.update);

Answer 4

我已经使用了pxLoader这个JavaScript Preloader，效果非常好。它默认使用100ms轮询。

除非你需要真正自定义的东西，否则我不会在这里重新发明轮子，所以请给那个（或任何JavaScript预加载器库）看看。

如何在JavaScript中管理依赖项？

4 个答案: