从另一个内部调用函数--javascript

Question

我对javascript相对较新，并且有一些我希望你可以提供帮助的问题。 我正在使用带有画布的结构库来创建各种动画。

我有一个按下相关按钮时调用的函数：

//for starting the animation
startSim.onclick = function(){

    //obtain speed value from the control panel.
    var speed = 10000 / (new Number(speedControl.value));
    //stuff
    //animation process
        object.animate('top', '+='+canvas.height,{
            duration: speed,
            abort: function(){
                var returnedBool;
                //Pause is pressed, simulation pauses
                if(pause){
                 //stuff
                }
                //restart required
                if(restart){
                    //stuff
                }
                //option here to save data?
                return returnedBool;
            },//end abort callback

            onChange: canvas.renderAll.bind(canvas),
            onComplete: function(){
                //stuff
            }
        });//end animate callback
};

我想做的是在上面的动画处于活动状态时调用某些其他功能。

我知道如何使用Java或C ++来做这个，但我似乎无法调用该函数。

我有一个应该输出各种信息的显示面板 - 因为动画完成变量会改变，我希望它们在屏幕上输出并在它们改变时更新。

我正在测试一个简单的功能：

    function updateInfoPanel(testSpeed){
    var test = document.getElementById('currentSpeed');
    test.innerHTML = test.innerHTML + testSpeed;
}

我想我需要在主动画循环中调用它，如果我在它之前调用它，但显然只显示变量一次。 有人能告诉我哪里出错了吗？

我也有一个基本的碰撞检测功能，但不在动画循环中，我认为这些问题是相互关联的。

非常感谢任何帮助。

我删除了代码中不必要的部分以节省空间。

所以我只是尝试使用函数作为onChange的结果：

onChange: function(){
                canvas.renderAll.bind(canvas);
                updateInfoPanel(speed);
            },

虽然速度变量确实很快在信息面板中更新，但这并不会出现语法错误，但动画没有连续运行。 :(

Answer 1

您需要调用 renderAll（），bind实际上返回一个函数用作处理程序。 试试这段代码：

onChange: function(){
                canvas.renderAll();//.bind(canvas);
                updateInfoPanel(speed);
            },

让我知道它是否有帮助？