javascript - 难以使用全局变量和 $.getScript

Question

我有以下无法正常工作的脚本:

function getWidgetContent( widget ) {
    if(widget.script!=null){
        $global_widget_id = widget.widget_id;
        $.getScript( "js/" + widget.script, function() {
            $( ".widget_header_title_" + widget.widget_id ).append( widget.title );
        });
    }
}

调用如下:

for ( j = 0; j <= widget_data.d.length - 1; j++ ) {
    getWidgetContent( widget_data.d[j] );
}

我认为这会运行函数，在函数内，为全局值分配一个值，然后在循环的每次迭代中运行 $.getScript。但这并没有发生。它似乎遍历循环直到循环完成，假设它循环 3 次，每次都为全局值分配一个值，即 3 次，然后它最终执行 $.getScript.

当然这不会起作用，因为它现在只会使用 $.getScript 文件中最后一次分配的全局值 3 次...

我如何更改它以便它为全局变量分配一个值，运行 $.getScript。完成后，继续原来的循环，将下一个值赋给全局变量，运行 $.getScript 直到循环结束。

Answer 1

你得到这个是因为 $.getScript 是一个异步方法。在这种情况下，这意味着该方法在脚本完成加载之前立即返回，并继续执行它之后的代码。

这意味着:

$.getScript('a.js', function () {
    console.log('Loaded a');
    }); 
$.getScript('b.js', function () {
    console.log('Loaded b');
    }); 
$.getScript('c.js', function () {
    console.log('Loaded c');
    }); 
// Output could be:
// Loaded c
// Loaded a
// Loaded b

这意味着所有脚本文件请求可以同时完成，但也意味着顺序不是确定性的(固定的)。

使用 promise

您可以通过链接 promises 确保 getWidgetContent 被顺序调用如果您使用的是 jQuery 1.5 及更高版本。但是，这种方法的缺点是您不会同时加载所有脚本请求，这些请求将在前一个请求完成后一个接一个地发送。

确保返回 $.getScript 的结果是 Deferred Object (我在这里做了很小的改动，只需注意 return 语句):

function getWidgetContent( widget ) {
  if(widget.script!=null){
    $global_widget_id = widget.widget_id;
    return $.getScript( "js/" + widget.script, function() {
        $( ".widget_header_title_" + widget.widget_id ).append( widget.title );
        });
  }
  return null;
}

在履行先前的 promise (完成先前的操作)后执行新的 getWidgetContent 的新方法:

function doGetWidgetContentAfter(promise, widget) {
  return promise.then(function () {
      return getWidgetContent( widget );
      });
}

调用它:

var promise = $.when(true);
for ( j = 0; j <= widget_data.d.length - 1; j++ ) {
  promise = doGetWidgetContentAfter( promise, widget_data.d[j] );
}

说明

doGetWidgetContentAfter 所做的是当所述 promise 完成时 then 为 调用 getWidgetContent 函数>小部件。 then 方法返回一个在任何内部方法 promise 完成时完成的 promise。

我知道这听起来有点复杂，但一定要尝试一下并试验一下。 :)