gpt4 book ai didi

javascript - 异步加载 javascript - 如何进行回调?

转载 作者:行者123 更新时间:2023-11-30 08:16:14 27 4
gpt4 key购买 nike

我正在构建一个应该异步加载的 javascript 小部件。

问题是页面上可能有超过 1 个这样的小部件,并且应该通过 {} 向它发送一个选项数组来初始化小部件。

实现此目标的最佳方法是什么?我听说仅设置 onload 或 onreadystatechange 并不适用于所有浏览器。

我查看了 digg 小部件,但我无法真正理解他们在做什么,有人可以看一下吗?

这是他们的一些代码:

(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);
}
})();

因此,如果 DiggWidget 已经可用(由于多个实例而较早加载),如果 DiggWidget 是一个函数,它会创建一个新的小部件,否则 DiggWidget 将用作数组并将当前设置推送给它。

首先,为什么 DiggWidget 会是一个函数?

如果小部件是唯一的(或第一个),则异步添加脚本标签,不定义任何回调。

然后,查看 widgets.js 他们这样做:

在顶部:

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

在底部:

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

现在我不太明白这个。 DiggWidget(数组)是否可用于该 .js ?它在一个匿名函数中。因此,如果我两次包含这样的脚本,DiggWidget 不会每次都是一个新实例吗?

还是我在这方面完全错了?对不起,如果是这样。如果有任何更好的方法来使用脚本的多个实例进行回调,请告诉。

最佳答案

First, why would DiggWidget ever be a function?

异步脚本加载执行时会变成一个函数

Is DiggWidget (the array) available to that .js

是的,window.DiggWidget 是全局的,因此它可用于该脚本。

小部件的工作方式相当简单。

如果 DiggWidget 脚本还没有加载,那么 window.DiggWidget 将不是一个函数。最初它将是一个 undefined variable ,所以 else block

} else {
DiggWidget = [diggWidget];

执行并将其定义为数组。从现在开始直到小部件脚本加载,它将被定义为一个数组。

现在,直到 DiggWidget 脚本异步加载,继续将所有初始化对象 {..} 推送到同名数组 - window.DiggWidget.

加载脚本时,在它超越全局 DiggWidget 变量之前,它会看到该数组中的对象,并将其安全地记录在其他地方。然后接管 DiggWidget 名称,循环遍历每个对象,并为每个对象初始化小部件。

这是带有注释的完整嵌入代码。

用户代码

(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);
}
})();

小部件代码(在顶部)

(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
}
}

(在底部)

    // 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 - 异步加载 javascript - 如何进行回调?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3557565/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com