document weergave vernieuwd niet tot einde code

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jan R

Jan R

09/02/2021 11:43:32
Quote Anchor link
hoi

Ik voor volgende code uit.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
document.getElementsByTagName("Body")[0].style.background="green";
newHS = prompt("Wat is je naam?", "JanR");

Het scherm wordt echter niet onmiddellijk groen zoals opgegeven maar wacht tot de gebruiker geantwoord geeft.

Waarom en hoe los ik dit op?

Jan

Toevoeging op 09/02/2021 11:46:18:

Zowel onder chrome als de nieuwe edge
werkend voorbeeld: https://www.janr.be/games/schuifpuzzel/
 
PHP hulp

PHP hulp

20/10/2021 01:52:52
 
Thom nvt

Thom nvt

09/02/2021 11:58:26
Quote Anchor link
Je veranderd de background color en direct daarna roep je een prompt op. Prompt werkt blokkerend, dat wil zeggen dat het alle uitvoer blokkeert, inclusief het opnieuw tekenen van de pagina.
Hierdoor heeft de browser niet genoeg tijd om de achtergrondkleur te updaten en opnieuw te tekenen waardoor je het resultaat pas ziet als de prompt is gesloten.

Je kan de prompt iets vertragen door het zo te doen:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
document.getElementsByTagName("Body")[0].style.background="green";
setTimeout(function() {
    newHS = prompt("Wat is je naam?", "JanR");
}, 1);

Hiermee vertraag de prompt() 1 milliseconde, dat zou precies genoeg tijd moeten zijn om de achtergrond opnieuw te tekenen.

Nu ben ik niet zo gecharmeerd van overal maar een kleine timeout op zetten maar ik kan even niets bedenken wat met prompt() werkt en het opnieuw tekenen op een nettere manier afvangt in "vanilla" javascript.

Editje: Je moet hiermee ook rekening houden met de scope van de variabele newHS, die bestaat alleen binnen de anonieme functie in setTimeout. Een van de redenen waarom ik dit geen mooie oplossing vind.
Gewijzigd op 09/02/2021 12:00:37 door Thom nvt
 
Jan R

Jan R

09/02/2021 18:52:53
Quote Anchor link
Great!
thanks.

In de praktijk staan er nog een paar commando's maar du zullen dus ook te snel zijn:)

Jan
 
Ad Fundum

Ad Fundum

11/02/2021 08:07:09
Quote Anchor link
Is document.getElementsByTagName("Body")[0] niet hetzelfde als document.body ?
 
Thom nvt

Thom nvt

11/02/2021 10:30:30
Quote Anchor link
Dat klopt inderdaad en zou het script wat leesbaarder maken.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.