如何知道processingjs草图已加载？

Question

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

：

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

    });
});

这里是#sketch所指的画布:

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

这个可以实现，但我也想使用Javascript与草图进行交互。当我在我的（firebug）控制台输入以下内容时，一切运行良好：

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

(addTweet是sketch的一个函数，只有在sketch加载后才能使用) 但是当我把它放到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

我认为在这一点上尚未加载草图，有回调或适当的方式来运行代码一旦它已经加载了吗？

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

- askmike

---

似乎这个问题还没有解决。这里有一些见解。 - Justin Bull

我建议使用 setInterval 轮询，直到实例不再返回 undefined。 - Justin Bull

Answer 1

这是我为我的一个项目准备的东西。它不太美观，但目前能胜任工作。

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);

- Justin Bull

Answer 2

问题在于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);
        });
    });
});

你也可以使用类(class)代替id。在回调函数中获取草图(sketch)，你就不需要使用getInstanceById了。

- DylanVann

---

很棒看到这最终被添加了 :) - askmike