jQuery getScript 不工作，或者我用错了

Question

我无法让 jquery 的 $.getScript 工作。这是一个测试文件，demo.html:

<!DOCTYPE html>

<script src="/xyz/scripts/jquery-1.11.0.min.js"></script>
<script>
    function wow() { return 3; }
</script>

<h1>Demo</h1>

<script>
    console.log(wow);
    console.log(wow());
</script>

当我在 Windows 10 的 Chrome 中浏览到此内容时，控制台中显示以下内容：

Navigated to https://example.org/xyz/tools/demo.html
demo.html:11 ƒ wow() { return 3; }
demo.html:12 3

这是正确的。

然后我将函数定义移动到名为 myModule.js:

的文件中

function wow() { return 3; }

并创建 demo2.html，即 demo.html 函数定义被 getScript 调用替换：

<!DOCTYPE html>

<script src="/xyz/scripts/jquery-1.11.0.min.js"></script>
<script>
    $.getScript("myModule.js");
</script>

<h1>Demo</h1>

<script>
    console.log(wow);
    console.log(wow());
</script>

这次我得到了

Navigated to https://example.org/xyz/tools/demo2.html
demo2.html:11 Uncaught ReferenceError: wow is not defined
at demo2.html:11

我是不是误解了 $.getScript 的用途或用法？

附录

为了响应将我的 console.log 调用包装在 $.ready 包装器中的建议，我尝试了以下操作：

<!DOCTYPE html>

<script src="/xyz/scripts/jquery-1.11.0.min.js"></script>
<script>
    $.getScript("myModule.js");
</script>

<h1>Demo</h1>

<script>
$.ready(function() {
    console.log(wow);
    console.log(wow());
});
</script>

这次我没有收到错误消息但是，而且，wow 和 wow() 的值没有写入控制台。

Answer 1

$.getscript

https://api.jquery.com/jquery.getscript/

This is a shorthand Ajax function, which is equivalent to:

$.ajax({
  url: url,
  dataType: "script",
  success: success
});

so $.getscript 进行异步调用，因此您的代码相当于：

$.getscript - 开始加载脚本
console.log(wow) - 由于脚本尚未加载，因此无法找到它
...完成加载脚本

您可以在脚本加载后使用回调来执行代码：

$.getScript("myModule.js", function() {
    console.log(wow);
    console.log(wow());
});

Answer 2

对getScript()的调用是一个异步操作，它不会阻止javascript其余部分的执行。您有两个选择：

1) 将需要 getScript() 内容的脚本包装在 $(document).ready() 中以延迟执行，直到所有内容都加载完毕。

2) 将回调作为第二个参数传递给 getScript。如果 getScript() 成功，将执行此回调。

Answer 3

getScript is asynchronous method，所以你需要像这样在回调中访问它的变量：

$.getScript( "ajax/test.js", function( data, textStatus, jqxhr ) {
  console.log( data ); // Data returned
  console.log( textStatus ); // Success
  console.log( jqxhr.status ); // 200
  console.log( "Load was performed." );
});

你的console.log（哇）；在脚本完全加载之前执行。

Answer 4

感谢@freedomn-m，他在回复后续评论中提到了 Promises，我在 How to include multiple js files using jQuery $.getScript() method 上看到了之前 post 讨论 $.when().done() 的内容。这导致脚本有效：

<!DOCTYPE html>

<script src="/xyz/scripts/jquery-1.11.0.min.js"></script>
<script>
    $.when(
        $.getScript("myModule.js")
    ).done(function() {
        console.log(wow);
        console.log(wow());
    });
</script>

<h1>Demo</h1>

jQuery getScript 不工作，或者我用错了

jQuery getScript not working, or I'm using it wrong

jquery

getscript