Diskuze: Okamžitý refresh DOM.

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

vencator

Člen

vencator:8.2.2017 21:42

Zdravím, píšu první dotaz do fóra, tak snad jsem něco neopomněl

Mám program, kde zadáte číslo a program zobrazí všechna prvočísla do zadaného čísla.

Jelikož při větších číslech to docela trvá, tak bych chtěl uživatele během počítání informovat v jaké je to fázi.

Když použiji <code>console.log("Computing prime numbers...");</code> ,tak se to v konzoli zobrazí okamžitě. Což je super.

Když však chci použít <code>info[0].textContent = "Computing prime numbers...";</code>, tak se to v paragrafu zobrazí až po dokončení funkce. Což není super.

info[0] je první <p id="info"></p>

Dotaz zní, jak mám kód, co mění textContent donutit, aby ho změnil okamžitě?

input.addEventListener("change", function(){
    reset();
    var startTime = new Date();
    userNumber = Number(input.value);
    if(userNumber <= 200000) {
       info[0].textContent = "Computing prime numbers..."; //zde je problém
       console.log("Computing prime numbers..."); //zde není problém
       step1();
       step2();
       step3();
       step4();
       info[0].textContent += " Done!"; //zde je problém
       console.log("Done!"); //zde není problém
       primes = primes.concat(numbers);
       var endTime = new Date();
       info[1].textContent = "Creating a results table..."; //zde je problém
       console.log("Creating a results table..."); //zde není problém
       resultTable();
       printResult();
       info[1].textContent += " Done!";
       console.log("Done!");
       var endTime2 = new Date();
       info[2].textContent = cycles + " cycles needed to generate "+ primes.length +" primes at time " + (endTime - startTime) + "ms";
       console.log(cycles + " cycles needed to generate "+ primes.length +" primes at time " + (endTime - startTime) + "ms");
       info[3].textContent = "Table generates in " + (endTime2 - endTime) + "ms";
       console.log("Table generates in " + (endTime2 - endTime) + "ms");
   } else alert("Your number is too high! Moron!");
});

Celý kód zde: https://jsfiddle.net/…or/byde5rxe/

Editováno 8.2.2017 21:43

Odpovědět

8.2.2017 21:42

David Hynek

Tvůrce

David Hynek:8.2.2017 22:18

tak to oznámení udělej jako nezávislou funkci. Funkce co bude počítat, tak mění nějakou hodnotu a ta první funkce počká až bude hodnota tak akorát a spustí oznámení...

Nahoru Odpovědět

8.2.2017 22:18

Čím víc vím, tím víc věcí nevím.

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:9.2.2017 17:53

To tady nepomuze problem je v zasade v tom, ze operace vypoctu je hodne heavy a zatizi hlavni vlakno aplikace natolik, ze se UI neupdatuje, prestava byt responzivni. viz tenhle fiddle https://jsfiddle.net/…ll/wyp845e2/ ... dlouho nic a pak sword-fish

vencator

V JSku se tenhle problem resi dvema zpusoby: budto prepises svuj algoritmus na tzv. iterativni reseni - to znamena, ze ho napises tak, aby bezel priblizne takhle:

zacne se pocitat -> nastavi se timeout na (napriklad) 30 ms a spocita se kousek, stav se ulozi -> nastavi se timeout na 30 ms a to je vse -> zase se kousek spocita, a stav ulozi, pak se nastavi timeout atd atd atd

druha moznost jsou web workery, sam jsem pred casem napsal knihovnu, ktera umoznuje snazsi praci s touhle technologii, kterou disponuji snad vsechny dnesni browsery, tahle technologie ti umoznuje pocitat v jinem vlakne, tedy vsechny vypocty se provadeji na pozadi a az se dopocita, posles si do hlavni kontextu zpravu a vysledek zobrazis, tvoje UI je mezitim naprosto responzivni

https://github.com/…ill/async.js
https://developer.mozilla.org/…_web_workers
https://benjaminhorn.io/…ngle-thread/

v tomhle vlaknu na SO se k tomu vyjadrujou stejne jako ja
http://stackoverflow.com/…n-javascript

hodne stesti tohle je docela zabavna oblast

Akceptované řešení
+20 Zkušeností
+2,50 Kč

Nahoru Odpovědět

9.2.2017 17:53

Neaktivní uživatelský účet

Aleš Lulák

Člen

Aleš Lulák:10.2.2017 8:05

Jen dodám, že to může být i 0 ms, ono se to s nulou stejně odloží tak i tak až na konec , ale spustí ihned, co bude moci.

Nahoru Odpovědět

10.2.2017 8:05

"I disapprove of what you say, but I will defend to the death your right to say it" - Evelyn Beatrice Hall

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:10.2.2017 10:45

Když jsi to zmínil, pamatuju, že IEcko na 0 nespustilo kód vůbec, už je to v pohodě?

Nahoru Odpovědět

10.2.2017 10:45

Neaktivní uživatelský účet

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:10.2.2017 16:29

Ano, protože IE už nikoho moc netrápí

Nahoru Odpovědět

10.2.2017 16:29

Neaktivní uživatelský účet

Libor Šimo (libcosenior)

Tvůrce

Libor Šimo (libcosenior):10.2.2017 16:35

Asi by si bol prekvapeny kolki zamestnanci este IE pouzivaju, dokonca pod winXP, pretoze musia.
A pritom je to hruza.

Nahoru Odpovědět

10.2.2017 16:35

Aj tisícmíľová cesta musí začať jednoduchým krokom.

vencator

Člen

vencator:11.2.2017 5:51

Sice nevím, jestli jsem vše pochopil, páč jsem úplnej začátečník, ale každopádně mě ty timeouty i dát oznámení jako funkci inspirovaly. A nyní to asi po tisíci různých pokusech tak nějak funguje

Takže všem děkuji za rady.

Nahoru Odpovědět

11.2.2017 5:51

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:11.2.2017 17:14

Nebyl bych překvapený, šestka a sedmička dohromady nemají ani procento. S osmičkou už nejsou takové problémy a od desítky je to podle mého relativně použitelný prohlížeč. Ale pokud lidem s IE budou weby v IE fungovat i nadále, pak nebudou mít nikdy důvod upgradovat na solidní prohlížeč.

Nahoru Odpovědět

11.2.2017 17:14

Neaktivní uživatelský účet

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 9 zpráv z 9.

Nejčastěji vyhledáváné

Diskuze: Okamžitý refresh DOM.