动态加载 p5.js 脚本答案

【问题标题】：Dynamically Load p5.js Script动态加载 p5.js 脚本
【发布时间】：2016-08-14 02:49:45
【问题描述】：

我正在尝试动态加载 p5.js 脚本（浏览器处理），但是，无论我做什么，我都无法让脚本在网页中显示其视觉效果。在正常情况下，我会在 index.html 中加载 p5 脚本，使用标准 <script src="sketch.js" type="text/javascript"></script>。但是，当我尝试使用 jquery 脚本动态附加脚本时，Chrome 会抛出“主线程上的同步 XMLHttpRequest 已被弃用，因为它对最终用户的体验产生不利影响”。我也尝试过使用

$('body').load("aSeparateFileWithTheScriptInIt.html", function() {
    console.log("load html was performed");
    $.getScript("sketch.js", function(data, textStatus, jqxhr) {
      console.log("load sketch was performed");
    });
  });

绝对不显示/打印任何内容。

奇怪的是，这段代码返回脚本运行成功。

$.getScript( "sketch.js" )
  .done(function( script, textStatus ) {
    console.log( textStatus );
  })
  .fail(function( jqxhr, settings, exception ) {
    $( "div.log" ).text( "Triggered ajaxError handler." );
});

我可以使用帮助来确定我应该如何正确使用 jquery 来动态加载sketch.js 文件。

【问题讨论】：

为什么需要动态加载脚本？这不是一个错误，它只是一个警告信息。你能发布一个minimal reproducible example 或链接到我们可以玩的 jsfiddle 吗？
我同意@KevinWorkman 您需要动态加载脚本的实际原因吗？难道你不能让脚本在你调用一个函数之前不运行吗？

标签： javascript jquery html processing p5.js

【解决方案1】：

不完全是你想要的，但我想原因是一样的。我通过在标题中添加带有async="true" 的新脚本来在运行时加载p5js。

在我的情况下，我没有看到 p5.js 应该存在的任何全局函数（特别是 loadImage、createCanvas）。

虽然我能够看到 p5 对象。

所以在我的情况下，我不得不手动调用 new p5(); 来解决问题。

就是这样，一切都在那里！

希望它能为某人节省几个小时:)

编辑 2019 年 5 月 14 日

我最终完全摆脱了p5 库，并自己重写了我需要的方法。

主要是因为p5 只允许页面上一个画布，而且与直接使用canvas 和canvas context 相比，它非常慢。

【讨论】：

【解决方案2】：

如果您必须异步加载您的草图（在 P5.js 加载并查找现有草图之后很久才开始），您必须添加以下行以便以“全局模式”启动草图

window.setup = setup;
window.draw  = draw;
new p5();

window 是一个全局变量，P5 用它的所有功能填充它以提供“全局模式”环境。

setup 和 draw 是那些用户定义的函数，P5 将调用以运行您的草图。它们必须是全局可用的之前 new p5() 运行 - 要么因为它们已被定义为这样，要么因为你明确地将它们设为全局（如我的示例所示）。

后者允许您在本地环境（例如 IIFE）中定义这两个函数以及您需要的任何其他方法（并且您不想污染全局命名空间），并且仍然摆脱讨厌的目标所有 P5 方法和属性前面的对象前缀（例如 p5.xxx）。

这个“解决方案”更像是一个“黑客”而不是一个真正的“答案”（因为它没有记录并且利用了将来可能会改变的行为）但它帮助我将外部脚本加载到一个已经加载的网页中运行P5 无需告诉这些草图它们将以“本地模式”执行（因为草图永远不需要知道它将在何种模式下运行）

【讨论】：