Javascript 如何知道processingjs草图何时加载？

我在processing中编写了自己的草图，并使用processingjs和ajax将其插入页面，如下所示：

$.getScript("js/libs/processingjs.js", function() {
    $('#sketch').each(function() {
        Processing.loadSketchFromSources(this, [$(this).data('processing-sources')]);

    });
});

这是画布#草图指的是：

<canvas data-processing-sources="first-sketch.pde" id='sketch'></canvas>

（addTweet是草图的一个功能，加载草图后可用） 但当我把它放在javascript中时，就像这样：

$.getScript("js/libs/processingjs.js", function() {
    $('#sketch').each(function() {
        Processing.loadSketchFromSources(this, [$(this).data('processing-sources')]);


        var sketch = Processing.getInstanceById('sketch');
        sketch.addTweet(30, 30, 100);

    });
});

我得到一个错误：

Uncaught TypeError: Cannot call method 'addTweet' of undefined

我认为现在还没有加载草图，是否有一个回调或一个正确的方法来运行加载后的代码

---

在

脚本

标记中包含processingjs库时，我收到了相同的错误。在jQuery.ready上运行代码。

下面是我为我的一个项目准备的东西。这并不漂亮，但它完成了工作（目前）

---

问题是loadSketchFromSources不是同步的

已向loadSketchFromSources函数添加回调（github，最新版本）。因此，您可以将代码编写为：

$.getScript("js/libs/processingjs.js", function() {
    $('#sketch').each(function() {
        Processing.loadSketchFromSources(this, [$(this).data('processing-sources')], function(sketch) {
          sketch.addTweet(30, 30, 100);
        });
    });
});

---

您也可以使用类而不是id。在回调中抓取草图，您不需要使用

getInstanceById

这似乎还没有解决。我建议只需轮询

setInterval

，直到实例不再返回

undefined

Awesome，看到它最终被添加：）

var timer = 0,
    timeout = 3000,
    mem = setInterval(function () {
        var sketch = Processing.getInstanceById("processingCanvas");
        if (sketch) {
            console.log("SKETCH HAS LOADED");
            clearInterval(mem);
        } else {
            timer += 10;
            if (timer > timeout) {
                console.log("FAILED TO LOAD SKETCH");
                clearInterval(mem);
            }
        }
    }, 10);

$.getScript("js/libs/processingjs.js", function() {
    $('#sketch').each(function() {
        Processing.loadSketchFromSources(this, [$(this).data('processing-sources')], function(sketch) {
          sketch.addTweet(30, 30, 100);
        });
    });
});