如何知道何时加载了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是草图的一个函数，一旦草图加载就可以使用)，但是当我将它放在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上运行代码。

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

Answer 2

问题是loadSketchFromSources是不同步的。

在loadSketchFromSources函数中添加了一个回调函数(github，latest)。所以你可以把你的代码写成：

$.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。