Question

我创建了一个事件监听器函数，它调用popcorn.js来显示字幕。我还在事件监听器之外创建与popcorn.js无关并声明全局变量数组的函数。我想在事件监听器中打印数组结果（c.innerHTML = subtitleArray [0] [2];）但它显示空字符串，即使它已经存储在数组中。请帮忙！

<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>

Answer 1

尝试类似

的内容

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;

Answer 2

您遇到的问题是，您运行的是两个在不同时间相互依赖的不同内容，并且您的全局变量存在范围问题。

DOMContentLoaded在onload事件之前运行，所以在尝试在发出请求之前使用返回的值之后进行Ajax调用。

将它们组合起来，使它们同时运行。

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

2 个答案: