为什么addEventListener函数无法获取全局变量？

我创建了一个叫popcorn.js显示字幕说明的事件监听功能。我还在事件监听器之外创建了与popcorn.js无关的函数，并声明了全局变量数组。我想打印阵列结果（c.innerHTML = subtitleArray [0] [2]）在事件监听器，但它显示出即使它已存储在阵列空字符串。请帮忙！为什么addEventListener函数无法获取全局变量？

<html> 
    <head> 
     <title>HTML5 included Javascript....</title> 
     <meta name="description" content="Test" charset="utf-8"></meta> 
     <script src="popcorn.js"></script> 
     <script type="text/javascript"> 

       var subtitleArray = new Array(); //stored all values from XML caption file 
       var firstLine; 
       var c = document.getElementById('container'); 

       function loadXMLDoc(dname) 
       { 
        if (window.XMLHttpRequest) 
        { 
        xhttp=new XMLHttpRequest(); 
        } 
        else 
        { 
        xhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
        } 
        xhttp.open("GET",dname,false); 
        xhttp.send(); 

        return xhttp.responseXML; 
       } 

       function getCaption() 
       { 

        var tempArray = new Array(); 


        captionsDoc = loadXMLDoc("captions.xml"); 
        x=captionsDoc.getElementsByTagName('text'); 

        for(var i=0;i<x.length;i++) 
        { 
         var tempArray = new Array(); 
         tempArray[0] = x[i].getAttribute('start'); // get start time 
         tempArray[1] = x[i].getAttribute('dur'); // get duration time 
         tempArray[2] = x[i].childNodes[0].nodeValue; // get text 

         subtitleArray[i] = tempArray; //put all 3 values in array 


        }   

        //c.innerHTML = subtitleArray[0][2]; 
        firstLine = subtitleArray[0][2]; 

       } 

       document.addEventListener("DOMContentLoaded", function() { 

        var popcorn = Popcorn("#video"); 
        c.innerHTML = subtitleArray[0][2]; 

        popcorn.subtitle({ 
         start: 0, 
         end: 3, 
         text: "Hello World", // "Hello World" replace to subtitleArray[0][2] 
         target: "text" 
        }).subtitle({ 
         start: 3, 
         end: 6, 
         text: "This is second line", 
         target: "text" 
        }); 

        popcorn.play(); 
       }, false); 

      window.onload = getCaption; 

     </script> 
    </head> 
    <body> 

     <div> 
      <video id="video" width="320" height="240" controls="true" preload="none"> 
       <source src="caption.mp4" type="video/mp4" /> 
       <source src="caption.webm" type="video/webm" /> 
       <source src="caption.ogg" type="video/ogg" /> 
      </video> 
     </div> 
     <div id="text" style="width:980px;height:50px;"></div> 
     <div id="container"></div> 
    </body> 
</html>

来源

2013-03-26 StudentIT

阿贾克斯是异步的，所以当您尝试使用数组，它仍然是空的。 – adeneo 2013-03-26 12:45:10

你的'c'变量在'getCaption'范围内，而不是全局变量。 – 2013-03-26 12:45:22

把警报在各功能，看看他们是所谓的顺序。 – biziclop 2013-03-26 12:46:27

你必须是你正在运行在不同的时间取决于对方，你有你的全局变量的作用域问题两回事问题。

DOMContentLoaded onload事件之前运行，所以你做的Ajax调用您尝试使用返回值的请求之前了。

结合它们，所以它们都在同一时间运行。

来源

2013-03-26 12:58:38 epascarello

我怎样才能将它们结合起来同时运行？ – StudentIT 2013-03-26 13:02:27

从一个函数中获取代码并将其按照正确的顺序放入另一个函数中？ – epascarello 2013-03-26 13:08:33

试着这么做

var subtitleArray = new Array(); // stored all values from XML caption file 
var firstLine; 

function loadXMLDoc(dname, callback) { 
    var xhttp; 
    if (window.XMLHttpRequest) { 
     xhttp = new XMLHttpRequest(); 
    } else { 
     xhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xhttp.open("GET", dname, false); 
    xhttp.send(); 

    xhttp.onreadystatechange = function() { 
     if (xhttp.readyState == 4 && xhttp.status == 200) { 
      callback(xhttp.responseXML); 
     } 
    } 
} 

function getCaption() { 

    var tempArray = new Array(); 
    var c = document.getElementById('container'); 

    loadXMLDoc("captions.xml", function(captionsDoc) { 
       var x = captionsDoc.getElementsByTagName('text'); 
       for (var i = 0; i < x.length; i++) { 
        var tempArray = new Array(); 
        tempArray[0] = x[i].getAttribute('start'); 
        tempArray[1] = x[i].getAttribute('dur'); 
        tempArray[2] = x[i].childNodes[0].nodeValue; 
        subtitleArray[i] = tempArray; 

       } 

       firstLine = subtitleArray[0][2]; 
       c.innerHTML = firstLine; 
      }); 
} 

document.addEventListener("DOMContentLoaded", function() { 
      var popcorn = Popcorn("#video"); 
      popcorn.subtitle({ 
         start : 0, 
         end : 3, 
         text : "Hello World", // "Hello World" replace to 
         // subtitleArray[0][2] 
         target : "text" 
        }).subtitle({ 
         start : 3, 
         end : 6, 
         text : "This is second line", 
         target : "text" 
        }); 

      popcorn.play(); 
     }, false); 

window.onload = getCaption;

来源

2013-03-26 12:58:21

为什么addEventListener函数无法获取全局变量？

回答

相关问题