如何知道处理js草图何时被加载？

Question

我写我自己的草图处理并将其插入使用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使用草图进行交互。当我在（萤火虫）键入此控制台一切都很正常：

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 LIB时收到同样的错误。并在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不同步。

的回调已添加（github上，最新的）到loadSketchFromSources功能。所以你可以写下你的代码：

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