A queue metódus

A queue metódus lehetővé teszi számunkra, hogy az elemhez kötött függvénysorral dolgozzunk. Lásd még a clearQueue metódust, amely lehetővé teszi számunkra, hogy az összes még nem indított függvényt eltávolítsuk a sorból.

Szintaxis

Így jelenítjük meg az elemhez kötött végrehajtandó függvények sorát. Opcionális paraméterként átadhatjuk a sor nevét karakterláncként (alapértelmezetten fx - a szabványos effektus sor):

javascript.queue([sor neve]);

Manipulálhatjuk a sort. Egyszer fut le minden egyes elemre. Ehhez második paraméterként átadhatunk egy függvénytömböt, amely lecseréli az aktuális sor tartalmát:

javascript.queue([sor neve], új sor );

Vagy második paraméterként átadhatunk egy új callback függvényt a sorhoz adáshoz. Ez a függvény viszont egy másik függvényt kap paraméterként. Ez lehetővé teszi, hogy automatikusan eltávolítsuk a sor következő elemét és továbbítsuk a sort:

javascript.queue([sor neve], callback-függvény(next) {
  next();
});

Minden elemnek lehet egy vagy több sora. Sok alkalmazásban csak egyet használnak (fx). A sorok lehetővé teszik az elemekkel kapcsolatos műveletek sorrendjét aszinkron módon, a program végrehajtásának megszakítása nélkül. A queue hívása callback függvénnyel lehetővé teszi számunkra, hogy egy új függvényt helyezzünk a sor végére. A callback függvény egyszer fut le a halmaz egyes elemeire. A queue használatával történő függvény hozzáadásakor biztosítanunk kell, hogy később meghívjuk a dequeue metódust, annak érdekében, hogy a láncban lévő következő függvény működjön.

Példa

Adjunk hozzá egy egyéni függvényt. Először, a #animate megnyomása után megjelenítünk egy piros négyzetet, amely 2 másodperc alatt jobbra fog mozogni, majd a queue segítségével hozzáadunk egy egyéni függvényt, amely zöldre színezi a négyzetet a newcolor osztály hozzáadásával. Amint láthatod, ezután itt meghívjuk a dequeue-t, hogy eltávolítsuk a függvényt a sorból. Ezután a négyzetünk fél másodperc alatt balra mozog és visszaszíneződik pirosra - a második egyéni függvénnyel eltávolítjuk a newcolor osztályt. Az animáció befejezésekor összecsukjuk a négyzetünket:

html<button id="animate">indítás</button>
<div></div>

cssdiv {
  position: absolute;
  margin: 3px;
  width: 50px;
  height: 50px;
  left: 0px;
  top: 30px;
  background: red;
  display: none;
}

div.newcolor {
  background: green;
}

javascript$('#animate').click(function() {
  $('div')
    .show('slow')
    .animate({left: '+=200'}, 2000)
    .queue(function() {
      $(this).addClass('newcolor').dequeue();
    })
    .animate({left: '-=200'}, 500)
    .queue(function() {
      $(this).removeClass('newcolor').dequeue();
    })
    .slideUp();
});

Példa

Adjunk hozzá egy tömb formájú sort, hogy eltávolítsuk az előzőt. A #start gomb megnyomásakor az előző példa animációját fogjuk látni. A #stop gomb megnyomásakor megállítjuk az animációt egy üres tömb hozzáadásával. A #start ismételt megnyomásakor az animáció újraindul:

html<button id="start">indítás</button>
<button id="stop">stop</button>
<div></div>

cssdiv {
  position: absolute;
  margin: 3px;
  width: 50px;
  height: 50px;
  left: 0px;
  top: 30px;
  background: red;
  display: none;
}
div.newcolor {
  background: green;
}     

javascript$('#start').click(function() {
  $('div')
    .show('slow')
    .animate({left: '+=200'}, 5000)
    .queue(function() {
      $(this).addClass('newcolor').dequeue();
    })
    .animate({left: '-=200'}, 1500)
    .queue(function() {
      $(this).removeClass('newcolor').dequeue();
    })
    .slideUp();
});
  
$('#stop').click(function() {
  $('div').queue('fx', []).stop();
});

Lásd még