Question

关注http://processingjs.org/articles/PomaxGuide.html在网页上使用处理草图，我的一个功能完美地利用了这一点：

function drawSomething() {

  // some calculations

  var pjs = Processing.getInstanceById('canvasID');
  var number = 5 // placeholder result of calculations
  pjs.drawText(number);
}

还有另一个函数drawSomethingElse，相同的pjs变量定义日志：

TypeError: pjs is undefined

所有代码都包含在docReady和drawSomething（）中;在页面加载时调用：

$(document).ready(function(){
  // do lots of stuff

  drawSomethingElse();
}

Answer 1

javascript中的范围是这样的。如果您在另一个函数中声明var或function，则只能在此函数中显示

function outerScope(){
   var outerVariable = "is defined in outer scope";
   function innerScope(){
      var innerVariable = "is defined in inner scope";
      console.log(outervariable); //innerScope can see outerVariable (through a closure)
   }
   console.log(innerVariable) //=undefined outerScope can't see innerVariable
   console.log(outerVariable) //outerScope can still see outerVariable
}
console.log(outerScope) //= function, global scope can see outerScope
console.log(outerVariable) //=undefined but global scope can't see inside outerScope
console.log(innerScope) //= undefined, therefore it can't see innerScope
console.log(innerVariable) //=undefined and of course not into inner scope

对于所有函数都是如此，包括jQuery函数，它们也不例外。因此，您必须在要使用范围“图层”的范围中定义var。并且为了不污染全局范围，您将事物包装到这些匿名函数中，只是为了添加范围“层”

无论您添加多少个图层，此模型始终适用。您将始终能够理解该行为。（顺便说一句总是检查你不确定的console.log的所有内容，它有助于追踪错误。你可以更准确地回答你的解决方案有什么问题，你知道如何修复它就越好）

调整您对范围的了解，因为您没有在当前范围内定义Processing，因此您知道必须在全局范围内，这意味着您可以打开浏览器控制台并且只需console.log(Processing)，也许可以在控制台中自己调用方法Processing.getInstanceById()几次。也许它不是画布id，也许它是你的草图的名称，它定义了实例的名称。尝试一下。

由于您现在知道在您希望通过javascript获取实例时未加载.pde草图，因此您有几个选项。最简单的方法是使草图成为文档的一部分，因此$（document）.ready（）仅在加载处理和草图时触发并执行你的javascript。

通常，processing会检查画布上的自定义data-processing-sources属性，并发送文件的异步请求（草图）。但由于它是异步的，因此它不是文档加载的一部分，因此文档已准备就绪，但草图不是。

如果您将草图代码放在文档内的脚本标记中，则文档在加载之前不会就绪。您还需要设置mime类型，否则浏览器会认为这是javascript并抛出错误。它不会改变任何其他内容，它只是设置Processing Sketch的另一种方式。

<script type="text/processing" data-processing-target="canvasID"> 
    //your sketch code
</script>
<canvas id="canvasID"></canvas>

为了让你仍然可以在外部加载你的草图，这里设置草图的第三种方法稍微有些混乱。删除整个脚本标记和草图。

跳过data-processing-target和data-processing-sources属性，而不是pjs = Processing.getInstanceById写

$(document).ready(function(){
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "yourSketch.pde");
    xhr.onload = function(){
        var code = xhr.response;
        var canvas = document.getElementById("canvasID")
         pjs = new Processing(canvas,code);
         //rest of your code
   }
   xhr.send();
});

注意：如果您从文件：// protocol

在本地查看您的网站，则此技术将无效

Answer 2

pjs范围是drawSomething函数，用于在不同的函数中使用它来改变你的代码，就像这样

(function() {
  var pjs = Processing.getInstanceById('canvasID');
  function drawSomething() {
    var number = 5 // placeholder result of calculations
    pjs.drawText(number);
  }

  function someotherfunction() {
     drawSomething();
  }
}());

现在你可以在这个匿名函数的任何地方使用pjs

Processing.getInstanceById（ID）;使用一个函数，未定义为另一个函数？

2 个答案: