Javascript Image.onload函数未触发

在尝试使用kinetic.js进行简单的tweening时出现上述错误。我的项目正在尝试将音频与动画同步。播放音频时经常调用函数“sync（）”。当音频达到4.85秒时，此函数inturn调用函数“animation1（）。该函数中的代码导致了我的问题

在这里尝试执行“layer.add（imageNoteTaker）；”行中，未定义变量imageNoteTaker。但是定义imageNoteTaker的代码在image.onload（）方法中出现在前面。但控制并没有完全跳过这一步

错误发生在以下部分：

ReferenceError: imageNoteTaker is not defined

layer.add(imageNoteTaker);

这是我的全部代码：

    var imageObj = new Image();
    imageObj.src="images/note_taker.png";        
    imageObj.onload = function(){
        imageNoteTaker= new Kinetic.Image({
            x: stage.getWidth()/2.35,
            y: stage.getHeight()/1.5,
            width: 75*202/100,
            height:75*350/100,
            image: imageObj
        });
    }
    layer.add(imageNoteTaker);
    layer.draw(); 

//变量声明
var audioId=document.getElementById（“audioId”）；
var currentAnimation=“无”；
//动力学库设置
var阶段=新的动力学阶段({
集装箱：'移动'，
宽度：800，
身高：545
}); 
//层声明
var layer=新的动能层（）；
阶段。添加（层）；
//播放音频时，函数在一秒钟内调用3-4次
var sync=函数（）{
var currentPosition=audioId.currentTime；
console.log（“直接来自音频标签：+currentPosition”）；
currentPosition=currentPosition.toFixed（2）；
console.log（“四舍五入后：+currentPosition”）；
开关（真）{
外壳范围发生器（5.85，当前位置）：
log（currentAnimation+“是currentAnimation”）；
如果（currentAnimation！=“animation1”）{
currentAnimation=“animation1”；
动画1（）；
}
打破
违约：
console.log（“默认”）；
}
};
//在sync（）函数中用于检查值是否在特定范围内的函数
var rangeGenerator=功能（值、当前位置）{
if（Math.abs（currentPosition value）通常在加载对象时调用onload方法。加载完成后，将触发加载事件。该事件然后触发该方法

如果是这样，则在调用animation1函数时，在代码执行过程中应跳过onload方法。因此未定义变量

我建议将变量imageNoteTaker设置为类内的全局变量-将其置于currentAnimation的定义下-并调用layer。仅在设置变量时添加（…）。
这句话“将其置于currentAnimation的定义下”是什么意思。//变量声明var audioId=document.getElementById（“audioId”）；var currentAnimation=“none”var imageNoteTaker=null；如果我将其声明为全局，则另一个错误显示imageNoteTaker为null。
//Variable Declaration
var audioId=document.getElementById("audioId");
var currentAnimation="none";



//Kinetic Library Setup
var stage = new Kinetic.Stage({
    container: 'moving',
    width: 800,
    height: 545
}); 

//Layer Declaration
var layer = new Kinetic.Layer();   
stage.add(layer);


//Function called 3-4 times in a second while playing audio
var sync=function(){
    var currentPosition = audioId.currentTime;
    console.log("direct from audio tag: "+currentPosition);
    currentPosition=currentPosition.toFixed(2);
    console.log("after rounding : "+currentPosition);
    switch(true){
        case rangeGenerator(5.85,currentPosition):
            console.log(currentAnimation + "is CurrentAnimation");
            if(currentAnimation!="animation1"){
                currentAnimation="animation1";
                animation1();
            }
            break;
        default:
            console.log("default");
    }
};




//Function used in sync() function to check a value is in particular range
var rangeGenerator=function(value,currentPosition){
    if(Math.abs(currentPosition-value)<.25){
        console.log(currentPosition+"dfd"+"value");
        return true;
    }
    else{
        return false;
    }
};


//Function that triggers the first animation; NoteTaker
var animation1=function(){
    console.log("Animation1");
    //Image Note_Taker Initialisation
    var imageObj = new Image();
    imageObj.src="images/note_taker.png";        
    imageObj.onload = function(){
        imageNoteTaker= new Kinetic.Image({
            x: stage.getWidth()/2.35,
            y: stage.getHeight()/1.5,
            width: 75*202/100,
            height:75*350/100,
            image: imageObj
        });
    }
    layer.add(imageNoteTaker);
    layer.draw(); 

    console.log("Tweening...");
    var tween = new Kinetic.Tween({
        node: imageNoteTaker, 
        duration: 1,
        x: stage.getWidth()/2.35,
        y: stage.getHeight()/4.0
    });     

    tween.play();


};

//On window resize, resizing stage too.
window.onresize = function(event) {
    stage.setWidth((window.innerWidth / 100) * 80);  // 80% width again
};