$ .getScript返回什么,它对范围有什么作用?

时间:2018-04-26 18:36:28

标签: javascript jquery ajax deferred .when

我正在创建一个插件,我想加载一些脚本,并为每个脚本运行函数plugin

我创建了一个set of tests/examples(下面的代码)。

问题:

  1. AJAX传递通常的data, textStatus, jqxhr个参数集。但显然也创建了plugin函数可用的范围。在文档中找不到任何相关内容。更多细节/解释请!

  2. this似乎在范围内是什么?

  3. 我通过映射脚本名称列表运行get脚本的第三个示例按预期工作。

  4. 建立一个延迟列表,然后使用when行动很奇怪。我没有表明函数已经运行(没有输出),当我删除延迟时,它似乎总是先完成("完成"打印在其他所有内容之前)。功能是否正在运行?我尝试添加alert,但在使用when时却没有显示。

  5. index.js

    var script_names = ["one.js", "two.js", "three.js"];
    
    function as_callback(script_name)
    {
      console.log("plugin function run as callback");
      console.log(`$.getScript(${script_name}, (data, textStatus, jqxhr) => plugin());`);
      $.getScript(script_name, (data, textStatus, jqxhr) => plugin());
      console.log();
    }
    
    function from_this(script_name)
    {
      console.log("plugin function referred to from 'this'");
      console.log(`$.getScript(${script_name}, (data, textStatus, jqxhr) => this.plugin());`);
      $.getScript(script_name, (data, textStatus, jqxhr) => this.plugin());
      console.log();
    }
    
    function with_map(script_names)
    {
      console.log("with map");
      console.log("string_names: " + JSON.stringify(script_names));
      console.log(`
      script_names.map((x) => 
      {
        $.getScript(x, (data, textStatus, jqxhr) => plugin())
      });
      `);
      script_names.map((x) => 
      {
        $.getScript(x, (data, textStatus, jqxhr) => plugin())
      });
      console.log();
    }
    
    function with_push_and_when(script_names)
    {
      console.log("build array of deferred and run with when");
      console.log(`
      var plugs = [];
      script_names.map(x => $.getScript(x, (data, textStatus, jqxhr) => plugs.push(plugin)));
      $.when(plugs).done(console.log("done"));
      `);
      var plugs = [];
      script_names.map(x => $.getScript(x, (data, textStatus, jqxhr) => plugs.push(plugin)));
      $.when(plugs).done(console.log("done"));
      console.log();
    }
    
    as_callback('one.js');
    
    setTimeout("from_this('two.js')", 2000);
    
    setTimeout("with_map(script_names)", 4000);
    
    setTimeout("with_push_and_when(script_names)", 6000);
    
    var plugs = [];
    script_names.map(x => $.getScript(x, (data, textStatus, jqxhr) => plugs.push(plugin)));
    setTimeout("console.log('run when in global scope');$.when(plugs).done(console.log('done'))", 8000);
    

    one.js

    var plugin = function()
    {
      console.log("one.js\n\n");
      // alert("one");
      return "one";
    }
    

    two.js

    var plugin = function()
    {
      console.log("two.js\n\n");
      return "two";
    }
    

    three.js所

    var plugin = function()
    {
      console.log("three.js\n\n");
      return "three";
    }
    

    输出

    plugin function run as callback
    $.getScript(one.js, (data, textStatus, jqxhr) => plugin());
    
    one.js
    
    
    plugin function referred to from 'this'
    $.getScript(two.js, (data, textStatus, jqxhr) => this.plugin());
    
    two.js
    
    
    with map
    string_names: ["one.js","two.js","three.js"]
    
      script_names.map((x) => 
      {
        $.getScript(x, (data, textStatus, jqxhr) => plugin())
      });
    
    
    two.js
    
    
    three.js
    
    
    one.js
    
    
    build array of deferred and run with when
    
      var plugs = [];
      script_names.map(x => $.getScript(x, (data, textStatus, jqxhr) => plugs.push(plugin)));
      $.when(plugs).done(console.log("done"));
    
    done
    
    run when in global scope
    done
    

    注意: 我将接受的答案添加到 repl.it

1 个答案:

答案 0 :(得分:1)

  1. 在加载脚本后,回调函数在全局上下文中运行。由于脚本定义了全局变量plugin,因此可以从回调函数中访问它。

  2. $.getScript未设置特定上下文,因此this将成为全局window对象。 this.pluginwindow.plugin相同,后者是全局变量。

  3. 这是对的。

  4. $.getScript会返回一个承诺,但您并未将其推送到plugs,而您只是推送plugin

  5. .map()的结果分配给plugs以获取正确的承诺数组。

    var plugs = script_names.map(x => $.getScript(x, (data, textStatus, jqxhr) => plugin()));
    $.when(plugs).done(console.log("done"));