0

这个问题是指 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() 呢？谢谢！

[编辑：将 updateViz() 移到 displayVisualization() 之外对我来说非常好。但是请解释一下 updateViz 中的变量应该如何引用 displayVisualization 中的变量？]

4

2 回答 2

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其他内容。关于闭包的更多信息：闭包并不复杂

于 2012-11-09T11:52:46.950 回答
1

如果上面的代码片段作为单独的 js 文件加载，您可以将变量分配给容器函数并返回对您的函数的引用

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

现在您可以使用 updateViz 调用此函数

displayVizualization.updateViz()
于 2012-11-11T23:12:21.677 回答