Pętla nie pozwala załadować strony

Question

Dzień dobry.

Robię skrypt w JS, który ma odczytać wartość z inputa i wsawić to do diva. Gdy w skrypcie zrobię nieskończoną pętlę ("while (true)") - Strona w nieskończoność się ładuje. Czekałem kilka minut i nic. Poniżej podaje kod skryptu.

while (true){
	function update() {
		document.getElementById('div').innerHTML = document.getElementById('text-to-display').value();;
	}
}

<input type="text" id="text-to-display" placeholder="Text to display">
<div id="div"></div>

 

Comments

Czego się spodziewasz po niekończonej pętli?  JS jest domyślnie synchroniczny więc dopóki nie wykona się funkcja nic dalej się nie wydarzy.

---

W takim razie jak to zrobić? Żaden element się nie pojawia mimo to, że skrypt jest ładowany poniżej kodu.

Answer 1

W skrócie: JS ma inny model wykonania niż języki typu Python czy C++, i w JS nieskończone pętle nie mają racji bytu.

W JS skrypt wykonuje się jako zestaw krótkich (w rozumieniu czasu wykonania) zadań (tasków), które pośrednio lub bezpośrednio kolejkują kolejne zadania. I te zadania są wykonywane jedno po drugim w kolejności zakolejkowania.  Vide https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop

Pomiędzy tymi zadaniami strona może być przerysowywana / jest czas na interakcje ze strony użytkownika / etc. Jeśli którekolwiek zadanie ma nieskończoną pętlę, to cała kolejka staje, strona nigdy się nie przerysuje, a zdarzenia ze strony użytkownika nigdy nie spowodują wykonania kolejnych zadań.

Czyli, nie możesz użyć nieskończonej pętli ;)

Zamiast tego musisz zarejestrować jakąś funkcje, która będzie dodana jako zadanie w momencie interakcji z <input> który tam masz, co robi się mniej więcej tak:

const divEl = document.getElementById('div');
const inputEl = document.getElementById('text-to-display');

function update() {
  divEl.innerText = inputEl.value;
}

// W przypadku zmiany, dodaj zadanie wywołania funkcji update.
inputEl.addEventListener('input', update);

P.S. Nigdy nie używaj innerHTML – to tylko powoduje błędy bezpieczeństwa (XSS) i jest prawie nigdy niepotrzebne. Zamiast tego innerText albo, jeśli trzeba, wchodzący dopiero setHTML. Jest kilka przypadków kiedy innerHTML jest potrzebny, ale wtedy trzeba całość przeanalizować pod kątem bezpieczeństwa i świadomie (i prawidłowo) tego użyć ;)

Comments

P.S.2. Tutaj jest więcej info o tym zdarzeniu "input":

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event