javascript - 在函数内执行 javascript 函数

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() 呢？谢谢!

[编辑:将 updateViz() 移到 displayVisualization() 之外对我来说完全没问题。但是请解释一下updateViz中的变量应该如何引用displayVisualization中的变量？]

Answer 1

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

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

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

displayVizualization.updateViz()