JavaScript: Nieskończona pętla n-kroków

2012-06-28 JavaScript

Za pomocą JavaScript można wykonać ciekawy mechanizm wywoływania kolejnych funkcji (jedna po drugiej) tworząc jednocześnie nieskończoną pętle w momencie kiedy ostatnia funkcja wywołuje pierwszą (rozpoczynając cykl od początku).

Przykład został pokazany poniżej z wykorzystaniem biblioteki jQuery. Opisywany mechanizm znalazł swoje zastosowanie na mojej jako prosty loader dający złudzenie animacji poprzez nieskończone wywoływanie (na przemian) funkcji fadeIn() oraz fadeOut().

Rozpoczynamy od zainicjowania prostego środowiska:

$(document).ready(function()
{
  //
}

Na początku definiujemy zmienną tworząc z niej coś w rodzaju punktu startu:

starting = false;

Teraz definiujemy “zerową” funkcję, która wywoła pierwszy krok.

function loadingStart()
{
  if(starting)
  {
    $('div#loading').fadeIn(2500); //symulacja pierwszego kroku
  }
  starting = true; //rozpoczęcie nieskonczonej petli
  loadingStep1(); //wywolanie pierwszego kroku
}

Następnie tworzymy n-funkcji gdzie na końcu każdej z nich wywołujemy n+1-tą funkcję.

Funkcja z krokiem pierwszym:

function loadingStep1()
{
  $('div#loading').fadeIn(2500, function()
  {
    loadingStep2(); //wywolanie drukiego kroku
  });
}

Funkcja z krokiem drugim:

function loadingStep2()
{
  $('div#loading').fadeOut(4500, function()
  {
    loadingStart(); //od poczatku
  });
}

Funkcja druga jest jednocześnie ostatnią zatem w niej wywołamy funkcję zerową po to aby dopiąć pętlę. Jednocześnie zmienna starting ustawiona na “true” gwarantuje nam ciągłe wywoływanie funkcji bez ryzyka przeciążenia pamięci przeglądarki.

Efekt można podejrzeć wchodząc na stronę główną. Logo strony (w momencie ładowania contentu) jest “przyciemniane” i “rozjaśniane” dając wrażenie animacji oraz sugerując, iż przeglądarka pracuje nad załadowaniem treści. Oczywiście mechanizm ten można wykorzystać w dowolnie inny sposób.

Matthew is native Polish and from time to time he writes articles in this language.
This page is an example of article in Polish language.