jQuery plugins - jQuery Timers
szept 28

jQuery Timers

Időzítés jQuery-vel

Verzió: 1.2.0
Kiadás dátuma: 2009/10/16
Fejlesztő: offput.ca
Liszensz: WTFPL

Bevezető

Ha "hagyományos" úton hozunk létre időzített eseményt (setTimeout és setInterval JavaScript parancsok), akkor a kód egy másik, tetszőleges pontján macerás azt megszüntetni. A jQuery Timers plugin segít ebben, ugyanis az egyes időzítéseket címkével (azonosítóval) láthatjuk el, így azokat a kód bármely részéről, minden különösebb gond nélkül képesek vagyunk "elérni". Mindazonáltal a címkék használatának másik előnye, hogy lehetőségünk van egyazon objektumhoz egyszerre több időzítést is hozzá rendelni!

Az időzítés két típusa közül választhatunk: van az egyszeri esemény meghívására szolgáló oneTime ( ), illetve a többszöri meghívást megvalósító everyTime ( ) metódus.

A plugin másik előnye, hogy az időértékeket nem csak a megszokott (valamint alapértelmezett) milliszekundumban képes fogadni (a setTimeout és setInterval parancsokkal ellentétben), hanem másodpercben is megadhatjuk a kívánt értékeket: pl.: '3s' az 3 másodpercet takar.
További használható jelölők még: 'ms', 'cs', 'ds', 'das', 'ws', 'ks'.

Implementálás

JavaScript

            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/jquery.timers.js"></script>
          

Metódusok

everyTime ( )

Leírás:
Segítségével a kívánt eseményeket meghatározott időközönként újra és újra végrehajthatjuk. Ez az "újra és újra" lehet végtelen, nem kontrollált, illetve meg adhatunk egy limit értéket is.

Szintaktika:
everyTime (interval : Integer | String, [label = interval : String], fn : Function, [times = 0 : Integer])

  • interval - az az idő, mely elteltével a kívánt esemény (fn paraméter) meghívásra kerül. Ez lehet egy egész szám (ez esetben az érték milliszekundumban értendő), illetve lehet sztring is, pl. '5s'.
  • label - az időzítő címkéje (sztring). A paraméter opcionális, megadása nem kötelező.
  • fn - a függvény, amely meghívásra kerül az interval opcióban megadott időközönként.
  • times - limit érték az időzítő futtatásához (egész szám). Megadása opcionális: ha nem adjuk meg, vagy értékként 0-t állítunk be, akkor az időzítő korlátlan ideig fut.

Példa:
Alábbi példa minden másodpercben növeli az i értékét 1-gyel, amelyet aztán megjelenít a .myTimer elemben - összegezve: kijelzi az eltelt időt másodpercben. Azonban a metódus végén szereplő '30'-as értékkel 30-ra korlátoztuk a függvény lefutását, így ez a számláló csupán az első 30 másodpercet számlálja.

            $(".myTimer").everyTime(1000,function(i){
              $(this).html(i);
            }, 5);
          

oneTime ( )

Leírás:
Lehetővé teszi, hogy a kívánt eseményeket egy meghatározott idő elteltével végrehajtsuk. Mint a nevéből is látszik, egyszeri végrehajtásról van szó.

Szintaktika:
oneTime (interval : Integer | String, [label = interval : String], fn : Function)

  • interval - időtartam, mely elteltével a kívánt esemény (fn paraméter) végrehajtódik. Előző metódushoz hasonlóan az értéke lehet egész szám, illetve sztring.
  • label - az adott időzítő címkéje (sztring). A paraméter opcionális, megadása nem kötelező.
  • fn - a függvény, amely meghívásra kerül az interval opcióban megadott idő elteltével.

Példa:
Alábbi kód egy #close-button elem click ( ) eseményéhez van rendelve, amely elindít egy időzítőt, amely egy másodpercet (1000 milliszekundumot) késlelteti a főablak (.main-window) elrejtését.
A kód második felében van még egy #cancel-button gombunk is, amellyel az időzítőt (és ezáltal az említett főablak elrejtését) megállíthatjuk. Ehhez a következő pontban ismertetett stopTime ( ) metódust hívjuk meg (alábbi kód egyúttal példa az időzítők címkével való használatára is - 'hide').

            $('#close-button').click(function() {
              $(this).oneTime(1000, 'hide', function() {
                $(this).parent('.main-window').hide();
              });
            });

            $('#cancel-button').click(function() {
              $('#close-button').stopTime('hide');
            });
          

stopTime ( )

Leírás:
Segítségével bármely időzítőt leállíthatjuk. Ha egy konkrét, címkével ellátott időzítőre alkalmazzuk, akkor az adott időzítő kerül leállításra. Ha paraméterként egy függvényt adunk meg (fn paraméter), akkor minden olyan időzítő leállításra kerül, amely az adott függvényt hívja meg (címkétől függetlenül), míg a harmadik lehetőség, hogy a metódust csak önmagában hívjuk meg, ez esetben az összes időzítő tiltva lesz.

Szintaktika:
stopTime ([label : Integer | String], [fn : Function])

  • label - az adott időzítő címkéje (sztring). A paraméter opcionális, megadása nem kötelező.
  • fn - a függvény, amely meghívását tiltani akarjuk. A paraméter opcionális, megadása nem kötelező.

Példa:
Lásd előző példát.