Question

我正在Web环境中编写两个脚本，我无法控制它们的加载顺序。假设这两个脚本名为MyUtil和DoSomething。

MyUtil包含我将使用window绑定到window.myUtil = myUtil对象的实用程序。然后，我将从myUtil内调用DoSomething的方法。

如果先加载MyUtil，一切都会正常工作。如果第二次加载，则window.myUtil将为undefined。

我如何修改DoSomething（和/或MyUtil）中的代码，以便在window.myUtil执行代码之前等到DoSomething存在？

注意：我正在使用jQuery 1.2.3。

Answer 1

jQuery.Deferred个对象提供了一种非常优雅的方法（我知道你没有使用jQuery 1.5：我只是给你一个升级;-)的理由：

假设我们有两个脚本合作如下：

// defines utilities    
var util = util || { loaded: $.Deferred() };
(function(){
    $.extend(util, {
        msg: "Hello!"
    });
    util.loaded.resolve();
})();

......和：

// uses them
var util = util || { loaded: $.Deferred() };
util.loaded.then(function(){
    alert(util.msg);
});

...警告将始终在第一个脚本有机会定义它的实用程序后触发，无论它们加载的顺序如何。这比setTimeout和基于事件的方法更有优势，因为它更容易有多个依赖项（使用$.when），不使用轮询，您不必担心明确处理加载顺序。

唯一重要的是所有模块必须包括：

var util = util || { loaded: $.Deferred() };

...和$.extend()以确保它们使用相同的延迟。

Answer 2

等到myUtil可用

您可以使用window.setInterval()设置计时器，等待window.myUtil设置为window.myUtil，然后再尝试使用它。

实施例

示例：http://jsfiddle.net/CtJ8A/1/

在加载了需要它的脚本后，模拟添加window.setTimeout((function(){ window.myUtil = { utility: function(){ alert('utility has great utility!'); } }; }), 5000); 的情况：

// Declaration of function that requires window.myUtil var doSomething = function() { window.myUtil.utility(); } /* * Timer that checks for myUtil every 100 milliseconds * When myUtil does exist, the timer is cleared, and doSomething() is called. * * Alternatively, one could put this timer inside doSomething(). */ var timer = window.setInterval(function(){ if (window.myUtil != undefined) { window.clearInterval(timer); doSomething(); } }, 100);

页面的其他地方：

{{1}}

Answer 3

我最终在MyUtil中使用了我在DoSomething中检查的触发器。这非常有效。

在MyUtil结束时，我补充道：

$(document).trigger('myUtilLoaded');

在DoSomething结束时，我补充道：

if (!(window.myUtil))
{
  $(document).bind('myUtilLoaded', function(e) {
    doSomething();
  });
}
else
{
  doSomething();
}

Answer 4

您可以使用load event

$('body').load(function() {
    window.myUtil.utility();        
});

Answer 5

这样的事情会起作用吗？

 function function1(callback){
        var params={
            type: "POST",
            url: "./ajax/doSomethingSlow.php",
            data: "",
            success: function(msg){
                callback(msg);
            },
            error: function(){
                callback('');
            }
        };
        var result=$.ajax(params).responseText;
    }




function1(function(){
   //call function2 here:
   function2();
});

Answer 6

您可以使用动态加载来加载javascript，但是如果您也无法控制脚本所在的位置，那么我认为这也可能是一个问题。

无论如何做某事你会基本上通过ajax拉下脚本或使用document.write插入新的脚本标记：

function doSomething(){
  if(!window.myUtil){
    // method of choice for loading script
    doSomething();
  }
  else {
    // normal logic for doSomething
  }
}

然后在您的util中，您需要对其进行修改，以便在分配之前检查现有的window.myUtil。如何看待取决于我的utl如何操作 - 无论是对象实例还是jsut是静态函数的文字集合。

有关实际加载脚本源的一些方法，请参阅this link。

Answer 7

您可以测试window.myUtil，如果未定义，请处理它。这可能意味着使用setInterval或setTimeout来轮询它的存在以及何时找到它，继续。

您也可以等待load事件，但这可能为时已晚。

当另一个函数存在时执行javascript

7 个答案:

等到myUtil可用

实施例