Глобальная переменная, не собирающая изменения внутри функции

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

---

Вы также установить функцию обратного вызова для FileReadersonload -Event. Это делается путем самозапуска function, чтобы предотвратить проблемы с областью действия. Новый function возвращается самозаменяющимся, а function используется как обратный вызов для onload -event. Поскольку это событие, оно будет вызываться только тогда, когда это событие срабатывает, которое может быть до или после доступа к 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 
}