Question

这个问题涉及kineticJS，但问题在于我认为嵌套函数的基本逻辑。我在div上有一个kineticjs阶段：

<div id="container"></div>

kineticjs脚本在舞台上形成一个形状：

function displayVizualization(){
    //SKETCH SIZE
    var SKETCH_WIDTH = 800;
    var SKETCH_HEIGTH = 800;


    var stage = new Kinetic.Stage({
        container: document.getElementById('container'),
        width: SKETCH_WIDTH,
        height: SKETCH_HEIGTH
    });
    var layer = new Kinetic.Layer();

    var rect = new Kinetic.Rect({
        x: 239,
        y: 75,
        width: 100,
        height: 50,
        fill: 'green',
        stroke: 'black',
        strokeWidth: 4
    });

    // add the shape to the layer
    layer.add(rect);

    // add the layer to the stage
    stage.add(layer);

    function updateViz(){
        console.log("we are in the updateViz function")
        var count = document.getElementById("formID:counter").value;
        console.log("count is: "+count);
        rect.transitionTo({
            x: 100*count,
            duration: 2,
            easing: easing
        });
    }
}

我需要在oncomplete属性中从此页面上的另一个脚本调用函数“updateViz”。我有话说：

oncomplete: updateViz();

但是我当然得到一个“函数未定义”错误，因为updateViz（）嵌套在displayVizualization（）中。

我该如何调用updateViz（）呢？ THX！

[编辑：在displayVisualization（）之外移动updateViz（）对我来说完全没问题。但是请解释一下updateViz中的变量应该如何引用displayVisualization中的变量？]

Answer 1

基本上，您不能，除非您修改displayVisualization以返回对其中updateViz的引用（或更重要的重构）。这是因为没有一个 updateViz函数，每个调用一个到displayVisualization。他们引用（“关闭”）对rect *的不同引用，其中rect取决于调用。

让我们使用一个更简单的例子：

function foo(n) { setTimeout(bar, 1000); function bar() { console.log(n); } } foo(10); foo(20);

上面的代码会发生什么？你清楚地知道你的东西，所以答案是第一次调用foo设置一个延迟的函数调用，这个调用将在一秒后发生，并将“10”记录到控制台。第二个调用设置记录“20”。

但为什么呢？因为没有一个 bar函数：每次调用bar时都会创建一个foo函数，并引用它创建的执行上下文（通过调用foo）创建的上下文。

如果您修改了displayVisualization以返回对updateViz的引用，那么您可以使用该返回值来调用updateViz，因为它会在适当时引用每个函数。

（我应该提一下，大多数现代JavaScript引擎实际上不会复制bar的代码，它们只会创建多个函数对象，这些对象引用相同的底层代码不同的执行上下文指针。但这是一个实现细节。）

*从技术上讲，它们不会关闭不同的rect引用，它们会关闭一些名为执行上下文的内容，其中包含rect等内容。关于闭包的更多信息：Closures are not complicated

Answer 2

如果将上述代码段作为单独的js文件加载，您可以为容器函数指定一个变量并返回对函数的引用

var displayVizualization = function (){
...
return { updateViz:updateViz }
}

现在您可以使用

调用此函数updateViz

displayVizualization.updateViz()

在函数中执行javascript函数

2 个答案: