javascript - 全局变量未拾取函数内的更改

Question

我有一段从 html5rocks 中获取的代码，用于加载一个文件，您可以将其拖放到页面上，并且我正在对其进行修改，以便它将文件读取到一个字符串中，然后我将其进行处理，并输出到页面。这一点是有效的，但我还需要能够在创建它的函数之外拾取字符串，但我不能。

我认为这要么是范围问题，要么是某种回调问题。无论如何，这是代码:

function handleFileSelect(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    var files = evt.dataTransfer.files; // FileList object.
    var output = [];
    var OutString = []; // < --my variable that I want to use

    for (var i = 0, f; f = files[i]; i++) {
        if (f.name.match('\.csv')) { // if 1
            var Filename = decodeURI(escape(f.name));
            var reader = new FileReader();
            reader.onload = (function (theFile) { 
                return function (e) {        
                    var contents = e.target.result;
                    var FileLines = contents.split("\n");
                    var LineCount = FileLines.length;
                    OutString = '<table id="mytab" border = "1" width = "90%"><tr>';
                    var ColCount = 1;
                    for (var i = 0; i < LineCount; ++i) {
                        OutString = // I format a table here..
                    }
                    OutString += '</tr></table>';

                    var span = document.createElement('span');
                    span.innerHTML = [OutString].join('');
                    document.getElementById('list').insertBefore(span, null);
                };
            })(f);

            reader.readAsText(f);
            // if format up a word document using xml here 
            testFunc = // I want to read the contents of OutString here

            // this creates the button that opens the finished document 
            var OutPutLine = "<a href='data:application/msword;charset=UTF-8, " + encodeURIComponent(TestFunc) + "' ><input id='Button1' type='button' value='Open printable sheet1' /></a>";
            output.push(OutPutLine);

        } else {
            // this triggers if its not a csv file that drag n drops
            output.push('<strong>', escape(f.name), ' is not a comma seperated (.csv) file!!!!</strong>');
        }
    }

    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}

function handleDragOver(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
}

// Setup the dnd listeners.
var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);

我不介意从变量中获取字符串，或者从文档(它是一个表)中获取它，但目前我也不能这样做。

Answer 1

你的变量OutString在 handleFileSelect 内声明(它前面有 var 关键字)，这意味着它只能用于该函数(或在该函数内声明的函数)。

要修复它，您可以声明您的 OutString外面handleFileSelect ，使其可供函数外部访问。

或者您可以获得 <table> - 元素通过引用 id ，您要分配给它的:

document.getElementById('mytab')

<小时/>

您还为 FileReaders 设置了回调onload -事件。这是通过自调用 function 来完成的，以防止范围问题。新function由自调用返回，function用作 onload 的回调-事件。由于这是一个事件，因此仅当该事件触发时才会调用它，这可能是在您访问 OutString 之前或之后。 (外部handleFileSelect)。您可以添加回调到 handleFileSelect像这样:

function handleFileSelect(evt, callback) {
    //Removed some code to shorten the example

    for (var i = 0, f; f = files[i]; i++) {
        if (f.name.match('\.csv')) { // if 1
            var Filename = decodeURI(escape(f.name));
            var reader = new FileReader();
            reader.onload = (function (theFile, onloadCallback) { 
                return function (e) {        
                    //Removed some code to shorten the example
                    document.getElementById('list').insertBefore(span, null);

                    if( onloadCallback && typeof onloadCallback === 'function' )
                        onloadCallback();
                };
            })(f, callback);

            //Removed some code to shorten the example
        } else {
            //Removed some code to shorten the example
    }
    //Removed some code to shorten the example
}