javascript - Processing.getInstanceById(id);使用一个函数，对另一个函数未定义？

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 函数，它们也不异常(exception)。所以这就是为什么你必须在你想要的范围“层”中定义一个 var 你想要使用它的原因。为了不污染全局范围，你将东西包装到这些匿名函数中，只是为了添加一个范围“层”

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

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

既然您现在知道您的 .pde 草图在您想要通过 javascript 获取实例时尚未加载，您有几个选择。最简单的方法是使草图成为文档的一部分，因此 $(document).ready() 仅在加载处理和草图时触发并执行您的 javascript。

通常处理会检查 Canvas 上的自定义 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();
});

注意:如果您从 file://协议(protocol)在本地查看您的网站，则此技术将不起作用