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/

这是Ajax的简写功能，等效于：

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

所以$.getscript进行异步调用，因此您的代码等效于：

$。getscript-开始加载脚本
console.log（哇）-由于脚本尚未加载，无法找到
...完成加载脚本

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

$.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的前一篇帖子中讨论了$ .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无法正常工作，或者我使用的是错误的

4 个答案: