如何等待另一个JS加载进行操作?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (65)

我的一个JS脚本需要首先加载Facebook SDK和Twitter小部件JS。Facebook创建FB对象,Twitter创建twttr对象。他们都在我的脚本触发后创建这些对象,即使它们是从<head>中加载的。

我认为解决方案是定期检查是否定义了FB和twttr,然后继续执行我的脚本。但我不知道如何做到这一点。

我试着创建一个循环

while (typeof FB === 'undefined' || typeof twttr === 'undefined' || typeof twttr.widgets === 'undefined') {
    // run timeout for 100 ms with noop inside
}

但是显然不起作用,因为它会以高速持续出现超时,并且页面挂起。

提问于
用户回答回答于

如果脚本在正常,装同步的方法,那么只要确保你的 <script>包括出现后,在文档库中的脚本<head>。另一方面,如果这些脚本异步加载对象,然后创建如下所示的内容:

function whenAvailable(name, callback) {
    var interval = 10; // ms
    window.setTimeout(function() {
        if (window[name]) {
            callback(window[name]);
        } else {
            window.setTimeout(arguments.callee, interval);
        }
    }, interval);
}

并像这样使用它:

whenAvailable("twttr", function(t) {
    // do something
});

在第二个参数中给出的函数whenAvailable将不会执行,直到twttr在全局window对象上定义为止。FB可以做同样的事情。

用户回答回答于

有没有把你的脚本在页面加载时执行?(即body onload="do_this ();"

这应该会让你的代码在所有外部资源加载完成后执行。

关于setTimeout的使用

setTimeout 将立即返回,如果想等待某个变量被定义,请使用如下所示的内容。

function when_external_loaded (callback) {
  if (typeof FB === 'undefined' || typeof twtter === 'undefined') {
    setTimeout (function () {
       when_external_loaded (callback);
    }, 100); // wait 100 ms
  } else { callback (); }
}

...

when_external_loaded (function () {
    alert (FB);
    alert (twtter);
});

所属标签

可能回答问题的人

  • 华讯云

    0 粉丝0 提问11 回答
  • 卓脑域名

    0 粉丝0 提问6 回答
  • gulu丶咕噜

    0 粉丝1 提问6 回答
  • EatRice

    16 粉丝0 提问5 回答

扫码关注云+社区

领取腾讯云代金券