NOVINKA - Online rekvalifikační kurz Python programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze – Lekce 29 - Časovače a animace v JavaScriptu

Zpět

Upozorňujeme, že diskuze pod našimi online kurzy jsou nemoderované a primárně slouží k získávání zpětné vazby pro budoucí vylepšení kurzů. Pro studenty našich rekvalifikačních kurzů nabízíme možnost přímého kontaktu s lektory a studijním referentem pro osobní konzultace a podporu v rámci jejich studia. Toto je exkluzivní služba, která zajišťuje kvalitní a cílenou pomoc v případě jakýchkoli dotazů nebo projektů.

Komentáře
Avatar
Odpovídá na Patrik Pastor
Michal Žůrek - misaz:25.3.2019 14:13

těžko říct jestli jsem to tehdy počítal nebo odhadoval, ale v principu je to polovina obrázku s nějakým odsazením.

 
Odpovědět
25.3.2019 14:13
Avatar
KaMl
Člen
Avatar
KaMl:10.9.2021 13:26

Dokonalá lekce - díky moc!
Byla jsem skalní vyznavač C#, ale JavaScript pro mě začíná být ještě větší srdcovka... (v) (*_*)

 
Odpovědět
10.9.2021 13:26
Avatar
Odpovídá na Michal Žůrek - misaz
Jaroslav Drobek:7.5.2022 8:18

V každém případě 225 je polovina šířky (i délky) obrázku kolo.png v pixelech. Takže příkaz kontext.drawImage(obrazek, -225, -225); zajišťuje posun obrázku tak, aby střed kola štěstí splýval se středem zamýšlené rotace..

 
Odpovědět
7.5.2022 8:18
Avatar
Jaroslav Drobek:7.5.2022 8:24

Hodnocení:

  • Jak je to s časovou sousledností? Je úplně jedno, jestli příkaz zmenText(); je před nebo za setInterval(zmenText, 1000); ..
  • Má být " na webu mohou být" místo "ne webu mohou".
  • Pět stejných tagů (listy) - kde zůstala iredundance?
  • "Listy...zača­ly.."
  • Proč se CSS vlastnosti nedefinují v CSS souboru? Zvláště když už jej máme založený a neprázdný..
 
Odpovědět
7.5.2022 8:24
Avatar
Jaroslav Drobek:7.5.2022 8:24

Hodnocení (pokračování):

  • Funkce posun: neuvěřitelně objemný kód - to je asi ten strašák Javascriptu..
  • V dřívějších lekcích se používalo obrazek.parentElement.removeChild(obrazek); místo zdejšího obrazek.style.display = "none";.
  • Je nutné kontext.clearRect(0,0,500,500); ? Rotuje kruh podle svého středu..
 
Odpovědět
7.5.2022 8:24
Avatar
Lubor Pešek
Člen
Avatar
Lubor Pešek:21.6.2022 10:49

Našel jsem si věc, která mi přijde vcelku potřebná.
Jako Javista přirovnávám funkce setInterval a setTimeout k vláknům (jestli se pletu, prosím o opravu).
Proto mě samozřejmě zajímá, jak takové vlákno ukončit.
Tak jen přikládám ukázku, která by mohla být zahrnuta v článku:

//javascript
let i = 1;
let loop;
window.onload = function() {
        loop = setInterval(counter, 500);
}

function counter() {
        console.log(i++);
        if(i === 6) {
                clearInterval(loop);
        }
}

Nevím, jestli tam nebudou překlepy, píšu to z mobilu:)

Kód je jednoduchý - jde o UKONČENÍ SETINTERVAL METODY.
V podstatě (jak už to v JS chodí) si funkci uložím do proměnné (v mém případě loop).
Normálně inkrementuji po půl sekundách číslo a jak dojdu k číslu 6, tak zavolám metodu:

clearInterval();

které jako parametr předám právě tuto funkci.

Co jsem si našel, tak tím, že to vložím do nějaké proměnné tak nastavuji vlastně ID tohoto intervalu. Proto oficiálně metoda clearInterval() přijímá jako parametr ID nějakého counteru (kdyby jich běželo víc).

Logicky - když si to neuložíte do proměnné, tak to už neukončíte a běží vám to do konce života (respektive než vypnete browser:))

Odpovědět
21.6.2022 10:49
Existují dva způsoby, jak vyřešit problém. Za prvé vyhoďte počítač z okna. Za druhé vyhoďte okna z počítače.
Avatar
Radek Lysák
Člen
Avatar
Radek Lysák:12.8.2022 11:20

Prosím pěkně. Jak by se dalo u padající listí udělat, aby padalo postupně. Respektive, každý list aby začal padat v jiném čase, nikoliv všechny současně? Lámu si nad tím hlavu a nemůžu na to přijít.

 
Odpovědět
12.8.2022 11:20
Avatar
DarkCoder
Člen
Avatar
Odpovídá na Radek Lysák
DarkCoder:12.8.2022 14:08

Je mnoho způsobů jak toho dosáhnout. Jedním z nich je způsob postupného nastavování časovače. Celá fáze má tři části - vykreslení, výběr, aktualizace. Když ma začít opadávání tak vybereš list a nastavíš interval. To je fáze výběru. Následně na všechny padající listy aplikuješ posun při pádu, to je fáze aktualizace. To je jedna iterace. Opět vykreslíš vše potřebné. Nyní otestuješ zda byl překročen interval. Pokud ano, vybereš nový list a opět nastavíš nový interval. Ideálně jiný, aby si docílil odlišné diference mezi padajícími listy. Opět aplikuješ pád na listy. To opalujes tak dlouho dokud nezastavíš celý proces.

Odpovědět
12.8.2022 14:08
"I ta nejlepší poučka postrádá na významu, není-li patřičně předána." - DarkCoder
Avatar
Niki Vávrová:23.2.2023 7:41

Srozumitelně napsaná lekce.

 
Odpovědět
23.2.2023 7:41
Avatar
Odpovídá na Jaroslav Drobek
Natálie Růžičková:25.10.2023 10:43

Děkujeme Jaroslave za tvé podněty, podívám se na to při aktualizaci.

 
Odpovědět
25.10.2023 10:43
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 10 zpráv z 41.