0

p5.j​​s スクリプト (ブラウザーの処理) を動的に読み込もうとしていますが、何をしても、スクリプトがそのビジュアルを Web ページに表示できません。通常の状況では、標準の .html を使用して、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 ファイルを動的にロードする方法を理解するのに役立ちます。

4

2 に答える 2

0

スケッチを非同期的にロードする必要がある場合 (P5.js がロードされ、既存のスケッチ自体を探した後で開始する必要がある場合)、「グローバル モード」でスケッチを開始するには、次の行を追加する必要があります。

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

window「グローバル モード」環境を提供するために、P5 がそのすべての関数で満たすグローバル変数です。

setupおよびdrawこれらのユーザー定義関数は、スケッチを実行するために P5 が呼び出します。それらは実行前 にグローバルに利用可能である必要がありnew p5()ます-そのように定義されているか、明示的にグローバルにしたためです（私の例に示すように）。

後者を使用すると、ローカル環境 (IIFE など) でこれら 2 つの関数を必要な (そしてグローバル名前空間を汚染したくない) 他のメソッドと一緒に定義でき、厄介なターゲット オブジェクト プレフィックス (例p5.xxx) すべての P5 メソッドとプロパティの前。

この「解決策」は、本当の「答え」というよりも「ハック」に近いものです (文書化されておらず、将来変更される可能性のある動作を悪用するため) が、P5を実行している既に読み込まれている Web ページに、これらのスケッチに「ローカル モード」で実行されることを伝えるため (スケッチは実行されるモードを知る必要がないため)

于 2021-04-06T14:12:01.637 に答える