如何知道處理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。