Timeri în javascript (setinterval, settimeout)

În programarea în limbi de scriere, există o necesitate periodică de a crea o pauză - pentru a suspenda programul pentru un timp și apoi continuați să lucrați. De exemplu, în script-urile VBS și PHP sunt posibile astfel de metode:







VBS: wscript.sleep 1500 (oprire pentru 1,5 secunde)

PHP: somn (10); (opriți timp de 10 secunde)

  1. i = 1;
  2. amâna adăugarea cifrei "1" în câmpul de introducere timp de 0,9 secunde;
  3. imediat după declararea acestei probleme, ciclul continuă: i = 2;
  4. amânați adăugarea cifrei "2" în câmpul de introducere timp de 0,9 secunde;
  5. .

Imediat ce înseamnă, de exemplu, 1 ms (de exemplu, în mod disproporționat de mici în comparație cu 900 ms) ciclu prozvedot munca lui aproape instantaneu, crearea mai multor sarcini în așteptare din același punct de timp. Aceasta înseamnă că toate sarcinile în așteptare pentru "desenare" vor fi executate aproape în același timp, fără pauze între adăugarea de figuri noi. Ciclul începe; totul se blochează cu 0,9 s; și shirrr - toate numerele sunt împușcate într-un rând unul după altul.

Și, într-un astfel de caz, aplicați corect setTimeout. E complicat. Este necesar să apelați funcția recursiv (din cadrul funcției aceeași funcție) și că acest proces nu era infinit, setați condiția de oprire (de exemplu, valoarea numărului imprimat):

Și, de asemenea, trebuie să inițializez variabila i în afara funcției - de exemplu, după cum urmează:

Acum, totul funcționează așa cum ar trebui (am redus timpul de întârziere de la 0,9 s la 0,4 s). Dar pentru astfel de sarcini este mai logic să nu folosiți setTimeout, ci setInterval (deși acest lucru necesită două funcții):

Particularitatea metodei Javascirpt setInterval este că nu trece „de la sine“, este necesar să se oprească metoda specială clearInterval. Și pentru a clarifica ce să oprim, sarcina pentru acțiunea amânată are un identificator special - timer: window.timer1 = window.setInterval (.).

Identificatorii pot fi, de asemenea, alocați sarcinilor create de metoda setTimeout. Toate ID-urile cronometrului trebuie să fie diferite unul de celălalt (să fie unice în fereastra browserului curent). Apoi, puteți crea mai multe sarcini diferite utilizând acțiunile în așteptare din fereastră, iar aceste activități vor fi executate paralel (cam ca și când computerul va dispune de resurse suficiente în același timp), ceea ce, în principiu, este imposibil în PHP sau VBS.







Meniu derulant

Meniul nostru a călătorit - de fapt, a călătorit (de sub „capacul“) a lăsat în mod intenționat decalaje între elementele pentru a vedea cum se lasă. În mod neașteptat, sa dovedit că nu putem face o verificare la fel de netedă pentru liste de lungimi diferite - probabil din cauza performanței scăzute a computerului (AMD Athlon 999 MHz).

Este evident că, pentru frumusețe și armonie, este necesar ca listele de elemente de meniu să dispară în același timp. Adică, listele mai lungi ar trebui să scadă la o viteză mai mare, mai scurte cu o viteză mai mică. Se pare că acest lucru se poate face astfel:

  1. Am stabilit timpul total de "plecare", de exemplu, în 200 ms.
  2. Dacă lista derulantă are o înălțime de 20 px, este evident că putem să-l deplasăm cu un pixel într-un interval de 10 ms - și apoi întreaga listă va ieși în 200 ms.
  3. Dacă lista verticală are o înălțime de 40 de pixeli pentru a se potrivi în același timp, trebuie să o deplasăm cu un pixel în 5 ms.

Prin urmare, mai mult sau mai puțin nivel de timp pentru a părăsi meniul poate fi doar folosind cârje, și încă nu este clar modul în care acest lucru va funcționa pe un calculator mai rapid. Dar ar trebui să ne bazăm pe cea mai lentă? Algoritmul (fără a lua în calcul viteza calculatorului) este aproximativ următorul:

  1. Setați timpul total pentru a părăsi lista: timpul = 224 (ms).
  2. Setați timpul minim pentru un interval în buclă: întârziere = 3 (ms).
  3. Setați pasul minim pentru mișcarea listei: offset = 1 (px).
  4. Schimbăm toate acestea în funcție de înălțimea listei: 1) mărim timpul de întârziere (interval) invers proporțional cu înălțimea și este direct proporțional cu timpul total (la o înălțime de 224, coeficientul este 1); 2) dacă înălțimea este mai mare de 40 de px, măriți pasul minim proporțional cu înălțimea. Constanta "40" a fost obtinuta printr-un mod experimental pentru cel mai lent computer. Testele pentru a descoperi exact Pentium 4 CPU 2.53GHz calculator este același număr - 40. În caz contrar, cronometre sunt Hawking, liste nu merge în sus.

Acum listele sunt mai mult sau mai puțin plecate. Pentru mai mult sau mai puțin în același timp. Pe pagina setinterval.htm.

Funcția însăși, împingând liste imbricate din meniu, după cum puteți vedea, este foarte simplă. Rămâne doar să o conducem în legătură cu această linie:

Ei bine, inainte de a incepe, calculati toate aceste maxtop si offset, si puneti lista in pozitia menta. Ce înseamnă funcția "preliminară" () cu o dimensiune de 40 de linii. Și toți împreună în fișierul setinterval.js. Da, și rahatul ăsta nu va funcționa fără fișierul de stil menuroll.css conectat.







Articole similare

Pagina anterioară

Pagina următoare

Trimiteți-le prietenilor: