0

Я по-прежнему плаваю в js. Нужны Ваши пояснения, чтобы разобраться с функциями в js раз и навсегда. Речь не о стрелочных, а об обычных. Вот пример кода (т.к здесь ajax он у вас не сработает при запуске):

const leftBar = document.querySelector('.left-bar');

window.onload = show_files

function show_files(){
	let xhr = new XMLHttpRequest();
	xhr.open('GET', 'php/files_list.php');
	xhr.send();
	xhr.onreadystatechange = function(){
		if(xhr.readyState != 4){
			return;	
		}
		if(xhr.status == 200){
			leftBar.removeAttribute('style');
			let resp = JSON.parse(xhr.response);
			leftBar.innerHTML += (resp.length == 0) 
			? `<p><b>Файлов загружено: ${resp.length} </b></p>` 
			: `<p><b>Файлов загружено: ${resp.length} </b></p>
			<ul id="files"></ul><br>
			<button class="padding-5" id="clear">Удалить файлы</button>`
			//Заполняем ul
			let ul = document.querySelector('#files')
			for(let i in resp){
				let li = document.createElement('li')
				li.innerHTML = resp[i];
				ul.appendChild(li)
			}
			arr = [...ul.children];
			return arr;
		}
		else if(xhr.status != 200){
			leftBar.style.border = '1px solid red'
			leftBar.innerHTML = 'Ошибка: ' + xhr.status
		}
	}
}

Немного прокомментирую код. Если на сервере нет файлов, то в .leftBar будет написано "Файлов загружено: 0". Если есть: "Файлов загружено: 15", список файлов и кнопка "Удалить файлы".

Но при этом мне нужно вернуть массив arr = [...ul.children];

Когда я ввожу arr в консоли, то она выводит массив, как надо. Но если где-то в коде нужно поработать с этой же переменной, то выходит ошибка "arr is not defined".

Итак, вопросы: 1) Как выполнить ajax и вернуть arr одновременно (только асинхронно?)? 2) Почему в консоли переменная видна, а при вызове в коде - нет? В коде я прописывал, кажется, по-всякому... 3) Как js понимает, где нужно выполнить функцию, а где сделать return? 4) Почему функции иногда пишут без скобок (речь опять не о стрелочных)? Например, show_files(); и show_files;

То же самое со стрелочной функцией. Массив не возвращается...

const show_files = () => {
	let xhr = new XMLHttpRequest();
	xhr.open('GET', 'php/files_list.php');
	xhr.send();
	xhr.onreadystatechange = function(){
		if(xhr.readyState != 4){
			return;	
		}
		if(xhr.status == 200){
			leftBar.removeAttribute('style');
			resp = JSON.parse(xhr.response);
			leftBar.innerHTML += (resp.length == 0) 
			? `<p><b>Файлов загружено: ${resp.length} </b></p>` 
			: `<p><b>Файлов загружено: ${resp.length} </b></p>
			<ul id="files"></ul><br>
			<button class="padding-5" id="clear">Удалить файлы</button>`
			//Заполняем ul
			let ul = document.querySelector('#files')
			for(let i in resp){
				let li = document.createElement('li')
				li.innerHTML = resp[i];
				ul.appendChild(li)
			}
			let arr = [...ul.children];
			return arr;
		}
		else if(xhr.status != 200){
			leftBar.style.border = '1px solid red'
			leftBar.innerHTML = 'Ошибка: ' + xhr.status
		}
	}
}

let arr = show_files();

Спасибо за Ваши ответы!

2
  • "Когда я ввожу arr в консоли, то она выводит массив, как надо." - не может быть, при показанном коде.
    – user176262
    7 июн 2019 в 13:46
  • У меня выводит... 7 июн 2019 в 14:12

1 ответ 1

0

а зачем вам вообще arr вы добьавляеть в ul кторые уже есть разметке

просто там где вам нужен будет arr сделайте так

let arr = [...document.querySelector('#files').children]

Используте промисы эьл уже давно стандарт и будет ок работать везде

const leftBar = document.querySelector('.left-bar');

window.onload = show_files

async function show_files(){
    let data =  await fetch('php/files_list.php');
    // в дате будет что сто от сервера и потом пишите логику и верните массив
}

из запросов проблемно возвращать данные

4
  • Видите ли в чем дело. Мне придется сравнивать два массива. Я хотел потом сделать setInterval. Каждую 2 сек видеть актуальные файлы. И чтобы div постоянно не обновлялся, хотел сравнивать, изменились ли файлы спустя 2 секунды. Если да, обновить div, если нет - оставить без изменения. Если он регулярно будет обновляться, то текст невозможно выделить мышью... 7 июн 2019 в 14:39
  • Хотя, наверное, вы правы: сделать только ajax. Ну, а все-таки, можно ли и ajax, и вернуть значение? Чисто в учебных целях интересуюсь 7 июн 2019 в 14:44
  • show_files разве разве что то возвращает ?
    – Ascolon
    7 июн 2019 в 14:54
  • xhr.onreadystatechange возращает arr а не show_files
    – Ascolon
    7 июн 2019 в 14:55

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.