加载JavaScript异步 - 如何做回调？ [英] Loading javascript asynchronously - How to do callbacks?

问题描述

我建立一个JavaScript小部件，应该异步加载。

问题是，可以有多于1页的插件上，这些窗口小部件的应通过{}

在发送一个选项数组进行初始化

什么是实现这一目标的最佳途径？听说简单的设置onload事件或onreadystatechange的并不适用于所有浏览器。

我已经签出了Digg的小部件，但我真的不能COM prehend他们在做什么，任何人都可以看看吗？

下面是他们的一些code的：

 （函数（）{
变种S，S1，diggWidget = {
    ID：Digg的部件 -  1282651415272
    宽度：300，
    显示：标签
};
如果（window.DiggWidget）{
    如果（typeof运算DiggWidget =='功能'）{
        新DiggWidget（diggWidget）;
    }其他{
        DiggWidget.push（diggWidget）;
    }
}其他{
    DiggWidget = [diggWidget];
    S =使用document.createElement（'SCRIPT'）;
    s.type =文/ JavaScript的';
    s.async = TRUE;
    s.src ='http://widgets.digg.com/widgets.js';
    S1 = document.getElementsByTagName（'SCRIPT'）[0];
    s1.parentNode.insertBefore（S，S1）;
}
}）（）;
 

因此​​，如果DiggWidget已经可用（早期加载由于多个实例），它使一个新的小窗口，如果DiggWidget是一个函数，否则DiggWidget用作阵列和当前设置推到它。

首先，为什么会DiggWidget永远是一个功能？

如果小部件是唯一一个（或第一），脚本标签是异步补充说，没有回调定义。

然后，看着widgets.js他们做到这一点：

在顶部：

 （函数（）{
风险价值;
如果（window.DiggWidget）{
    如果（typeof运算DiggWidget！=功能）{
        A = DiggWidget
    }其他{
        返回
    }
}
 

在底部：

 若（a）{
    而（则为a.length）{
        新DiggWidget（A.shift（））
    }
}
 

现在我不明白这一点。是DiggWidget（阵列）可用于该.js文件？这是一个匿名函数。所以，如果我有这样的脚本两次，不会DiggWidget每次都成为一个新的实例？

或完全是我错了这个？很抱歉，如果如此。如果有任何更好的方法来与剧本的多个实例的回调，请不要告诉。

解决方案

  

首先，为什么会DiggWidget永远是一个功能？

这将成为一个功能，当异步脚本加载并执行

  

时DiggWidget（阵列）提供给该.js文件

是 window.DiggWidget 是全球性的，因此是适用于该脚本。

小部件的工作方式很简单。

如果在 DiggWidget 脚本尚未加载，那么 window.DiggWidget 将不会是一个功能。最初，这将是一个不确定的变量，因此else块

 }其他{
    DiggWidget = [diggWidget];
 

执行，并将其定义为一个阵列。从现在起，直到该插件脚本加载时，它被定义为一个阵列。

现在，直到 DiggWidget 脚本异步加载，继续推动所有初始化对象 {...} 来的数组同一个名字 - window.DiggWidget

当加载脚本，它超越了全球 DiggWidget 变量之前它看到数组中的对象，并安全地记录在别处。然后接管DiggWidget名，通过每个对象循环，并初始化窗口小部件每个

下面是完整的嵌入code。与评论注解。

用户code

 （函数（）{
变种S，S1，diggWidget = {
    ID：Digg的部件 -  1282651415272
    宽度：300，
    显示：标签
};
//无论外部插件脚本已经加载，或存在多于
//一个构件，被嵌入在页面上，和previous部件的嵌入code
//定义这个变量
如果（window.DiggWidget）{
    //外部部件剧本已经异步加载
    //因为DiggWidget是一个函数。可以直接创建一个新的对象。
    如果（typeof运算DiggWidget =='功能'）{
        新DiggWidget（diggWidget）;
    }
    //一个previous部件的嵌入code定义了这个全局数组。记住
    //外部脚本加载时的小部件初始化设置。
    其他{
        DiggWidget.push（diggWidget）;
    }
}
//外部部件剧本尚未加载，
//这是第一插件永远要被嵌入在页面上
其他{
    // DiggWidget并不在这一点上存在。因此，让一个数组
    //和第一小的配置对象存储在它
    DiggWidget = [diggWidget];
    S =使用document.createElement（'SCRIPT'）;
    s.type =文/ JavaScript的';
    s.async = TRUE;
    s.src ='http://widgets.digg.com/widgets.js';
    S1 = document.getElementsByTagName（'SCRIPT'）[0];
    s1.parentNode.insertBefore（S，S1）;
}
}）（）;
 

的Widget code（顶部）

 （函数（）{
风险价值;
//全球DiggWiget定义。它要么是一个数组，如果
//小部件code有没有载入，或函数，如果它有
如果（window.DiggWidget）{
    //它是一个数组，所以保持该阵列安全的地方
    //因为我们是要接管DiggWidget变量普尔蒂很快
    如果（typeof运算DiggWidget！=功能）{
        A = DiggWidget
    }
    // window.DiggWidget必须是一个函数
    //没有任何部件进行初始化，只是回报
    其他{
        返回
    }
}
 

（在底部）

  //一个是窗口小部件设置的阵列，我们备份早一点
    如果一个） {
    //通过每个配置项对象循环和创建实际
    // widget对象
    而（则为a.length）{
        新DiggWidget（A.shift（））
    }
}
 

I am building a javascript widget that should load asynchronously.

Problem is that there can be more than 1 of these widgets on the page and that the widget should be initialized by sending it an option array via {}.

What is the best way to accomplish this? I heard that simply setting onload or onreadystatechange does not work in all browsers.

I've checked out the digg widget, but I can't really comprehend what they're doing, could anyone take a look at that?

Here's some of their code:

(function () {
var s, s1, diggWidget = {
    id: "digg-widget-1282651415272",
    width: 300,
    display: "tabbed"
};
if (window.DiggWidget) {
    if (typeof DiggWidget == 'function') {
        new DiggWidget(diggWidget);
    } else {
        DiggWidget.push(diggWidget);
    }
} else {
    DiggWidget = [diggWidget];
    s = document.createElement('SCRIPT');
    s.type = 'text/javascript';
    s.async = true;
    s.src = 'http://widgets.digg.com/widgets.js';
    s1 = document.getElementsByTagName('SCRIPT')[0];
    s1.parentNode.insertBefore(s, s1);
}
})();

So, if the DiggWidget is already available (loaded earlier due to multiple instances), it makes a new widget if DiggWidget is a function, otherwise DiggWidget is used as an array and the current settings are pushed to it.

First, why would DiggWidget ever be a function?

If the widget is the only one (or first), the script tag is added asynchronously, no callbacks are defined.

Then, looking at widgets.js they do this:

At the top:

(function () {
var A;
if (window.DiggWidget) {
    if (typeof DiggWidget != "function") {
        A = DiggWidget
    } else {
        return
    }
}

At the bottom:

    if (A) {
    while (A.length) {
        new DiggWidget(A.shift())
    }
}

Now I don't quite understand this. Is DiggWidget (the array) available to that .js ? It's in a anonymous function. So if I include such a script twice, wouldn't DiggWidget be a new instance every time?

Or am I completely in the wrong on this? Sorry if so. If there's any better methods to have a callback with multiple instances of the script, please do tell.

解决方案

First, why would DiggWidget ever be a function?

It will become a function when the asynchronous script loads and executes

Is DiggWidget (the array) available to that .js

Yes, window.DiggWidget is global so it's available to that script.

The way the widget works is rather simple.

If the DiggWidget script has not been loaded yet, then window.DiggWidget will not be a function. Initially it will be an undefined variable so the else block

} else {
    DiggWidget = [diggWidget];

executes and defines it as an array. From now onwards and until the widget script loads, it will be defined as an array.

Now until the DiggWidget script loads asynchronously, keep pushing all initialization objects {..} to an array of the same name - window.DiggWidget.

When the script is loaded, before it overtakes the global DiggWidget variable it sees the objects in that array, and safely records it somewhere else. Then takes over the DiggWidget name, loops through each object, and initializes the widget for each.

Here's the full embed code annotated with comments.

User code

(function () {
var s, s1, diggWidget = {
    id: "digg-widget-1282651415272",
    width: 300,
    display: "tabbed"
};
// either the external widget script has already loaded, or there is more than
// one widget to be embedded on the page, and the previous widget's embed code
// defined this variable
if (window.DiggWidget) {
    // the external widget script has been loaded asynchronously 
    // because DiggWidget is a function. Can directly create a new object.
    if (typeof DiggWidget == 'function') {
        new DiggWidget(diggWidget);
    }
    // a previous widget's embed code defined this global array. Remember the
    // widgets initialization settings for when the external script loads.
    else {
        DiggWidget.push(diggWidget);
    }
}
// the external widget script has not loaded yet and
// this is the first widget ever to be embedded on the page
else {
    // DiggWidget does not exist at this point. So make it an array
    // and store the first widget's config object in it
    DiggWidget = [diggWidget];
    s = document.createElement('SCRIPT');
    s.type = 'text/javascript';
    s.async = true;
    s.src = 'http://widgets.digg.com/widgets.js';
    s1 = document.getElementsByTagName('SCRIPT')[0];
    s1.parentNode.insertBefore(s, s1);
}
})();

Widget code (at the top)

(function () {
var A;
// global DiggWiget is defined. it will either be an array if 
// the widget code hasn't loaded yet, or a function if it has
if (window.DiggWidget) {
    // it's an array, so keep that array somewhere safe
    // because we are gonna take over the DiggWidget variable purdy soon
    if (typeof DiggWidget != "function") {
        A = DiggWidget
    }
    // window.DiggWidget must be a function
    // there is no widget to initialize, just return
    else {
        return
    }
}

(at the bottom)

    // A is the array of widget settings we backed up a little earlier
    if (A) {
    // loop through each config object and create the actual
    // widget object
    while (A.length) {
        new DiggWidget(A.shift())
    }
}

这篇关于加载JavaScript异步 - 如何做回调？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！