Как присвоить в функции значение глобальной переменной?

Question

[Shurik]

Здравствуйте. Есть некий код, который парсит документ xml в объект. Все работает хорошо, но есть необходимость во вложенной функции присвоить значение некой глобальной переменной temp. Но присвоения почему то не происходит. С чем это могло бы быть связано?

const input = document.querySelector("#in");
				var temp;

		    if(input.addEventListener) {
		        input.addEventListener('change', filePicked, false);
		    }

				function filePicked(oEvent) {
				    var oFile = oEvent.target.files[0];
						var sFilename = oFile.name;
				    var reader = new FileReader();
				    reader.onload = function(e) {
				        var data = e.target.result;
				        var cfb = XLS.CFB.read(data, {type: 'binary'});
				        var wb = XLS.parse_xlscfb(cfb);
								var ojs;
				        wb.SheetNames.forEach(function(sheetName) {
				            var sv = XLS.utils.make_csv(wb.Sheets[sheetName]);
				            ojs = XLS.utils.sheet_to_row_object_array(wb.Sheets[sheetName]);
				            //console.log(ojs);
				            ojs.forEach(function (el){
				              console.log(el.name)
				            })
				        });

				        for(let key in ojs) {
				          var keys = Object.keys(ojs[key]);
				          if (keys.length <= 2) {
				            ojs[last_full_row].PRODUCTS.push({ "name": ojs[key].PRODUCT, "netto": ojs[key].NETTO });
				            delete ojs[key];
				          }else {
				            var last_full_row = key;
				            ojs[key].PRODUCTS = Array({ "name": ojs[key].PRODUCT, "netto": ojs[key].NETTO });
				            delete ojs[key].PRODUCT
				            delete ojs[key].NETTO
				          }
				        }
								
								temp = "test value";

				    };
				     reader.readAsBinaryString(oFile);
				}

Если быть точным, то хочу присвоить значение переменной ojs в глобальную переменную. Но для теста сделал temp - c ней тоже не работает

Comments

[Владимир Солнцев]

Дебаггер юзали?)

[Владимир Солнцев]

Еще вопрос в том, где вы пытаетесь прочитать это значение. Присваивание происходит ведь асинхронно. Возможно вы читаете до того, как оно произойдет?

[Shurik]

Владимир Солнцев, нет! а как им пользоваться?)

[Владимир Солнцев]

svisch, пишите прям в коде, в месте, с которого хотите смотреть внутренности:

function filePicked(... {
debugger;
....
}

Запускаете код или в IDE запускаете дебаггер. Когда функция сработает, на каждой инструкции выполнение будет останавливаться и можно будет посмотреть чему равны переменные, как выполняется код и тд. Это в двух словах, а так тема обширная и очень полезная, лучше сами почитайте в интернетах)

[Shurik]

Владимир Солнцев, читать пытаюсь в другом методе. Вообще, если быть точнее, то что я привел - это метод vue. Он срабатывает при загрузке страницы. То есть что происходит. Загружается страница, я выбираю файл в поле инпут, срабатывает событие onchange и срабатывает обработчик filePicked. Сут в том, чтобы значение вычисляемое в нем передать в vue, a потом использовать дальше в другом методе. Похожий код, но немного проще с тем же принципом работает у меня, но тут меня смущают вложенные функции и в частности строка "reader.onload = function(e)"

[Владимир Солнцев]

svisch, вот это
функция в reader.onload выполняется асинхронно. Следовательно, вы и значение temp задаете не сразу, а когда сработает событие. Возможно, вы вызываете другой метод до того, как сработает это событие и в переменную temp хоть что-то попадет.
То есть, возможно, ваша проблема в упрощенной форме:

var temp;
setTimeout(() => {
  temp = 'Hello, I\'m undefined';
}, 0)
console.log(temp);

Метод Лог сработает перед тем, как выполнится код в таймере.

[Shurik]

Владимир Солнцев, я понял о чем вы, но пока точно разобраться не в силах, так как книжка по базовым знаниям js еще не до конца прочитана, а тут вот такая задача))
В похожем, но рабочем коде, который я уже упоминал, есть небольшое различие в обработке события:

const input = document.querySelector("#in");
				let file;

				input.addEventListener("change", async e => {
				  file = e.target.files[0];
				  this.fileContent = await file.text();
				});

Может это и играет ключевую роль?) this.file.Content - это в принципе и есть глобальная переменная куда надо присвоить значени. В изначальном примере его нет ввиду тестов)

[Владимир Солнцев]

svisch, возможно. в этом куске, вы инструкцией await ... приостанавливаете дальнейшее выполнение кода, пока данные не придут в fileContent;

[Shurik]

Владимир Солнцев, может) Но в принципе цель не только сделать рабочий код того примера, а хотелось бы разобраться почему казалось бы простые вещи не работают...
Нашел на стэковерфлоу немного похожую проблему. Только не особо понял на английском к каким именно переменным там не может тс получить доступ, но ему там посоветовали использовать замыкание:

reader.onload = (function(f) {
            return function(e) {
                // Here you can use `e.target.result` or `this.result`
                // and `f.name`.
            };
        })(file);

Не знаю может ли быть в этом проблема и если да, то как это применить в моем случае))

[Владимир Солнцев]

svisch, чтобы разобраться, почитайте про событийную модель в js и асинхронность в js.

[Shurik]

Владимир Солнцев, хорошо! Спасибо за подсказки, буду читать и думать что и как)

[Владимир Солнцев]

svisch, успехов! Разберетесь с этим, и считай почти выучили язык)

[Shurik]

Владимир Солнцев, )))))