Metoda queue

Metoda queue nam omogoča delo s čakalno vrsto funkcij, povezanih z elementom. Glejte tudi metodo clearQueue, ki nam omogoča brisanje vseh neizvedenih funkcij iz čakalne vrste.

Sintaksa

Tako prikažemo čakalno vrsto izvajajočih se funkcij, povezanih z elementom. Kot neobvezen parameter lahko podamo ime čakalne vrste v obliki niza (privzeto je fx - standardna vrsta efektov):

javascript.queue([ime čakalne vrste]);

Z čakalno vrsto lahko manipulíramo. Izvede se enkrat za vsak element. Za to lahko podamo kot drugi parameter polje funkcij, ki bodo zamenjale vsebino trenutne čakalne vrste:

javascript.queue([ime čakalne vrste], nova čakalna vrsta );

Lahko pa kot drugi parameter podamo novo callback-funkcijo za dodajanje v čakalno vrsto. Ta funkcija dobi drugo funkcijo kot parameter. To omogoča avtomatično odstranjevanje naslednjega elementa iz čakalne vrste in njeno premikanje:

javascript.queue([ime čakalne vrste], callback-funkcija(next) {
  next();
});

Vsak element ima lahko eno ali več čakalnih vrst. V mnogih aplikacijah se uporablja samo ena (fx). Čakalne vrste omogočajo zaporedje akcij z elementom asinhrono, brez prekinitve izvajanja programa. Klic queue s callback-funkcijo nam omogoča postavitev nove funkcije na konec čakalne vrste. Callback-funkcija se izvede enkrat za vsak element v nizu. Pri dodajanju funkcije z queue, se moramo prepričati, da bo kasneje poklicana metoda dequeue, da bo naslednja funkcija v verigi začela delovati.

Primer

Dodajmo uporabniško funkcijo. Najprej, po kliku na #animate, bomo prikazali rdeči kvadrat, ki se bo premikal v desno v trajanju 2s, nato pa bomo s pomočjo queue dodali uporabniško funkcijo, ki bo kvadrat prebarvala v zeleno z dodajanjem razreda newcolor. Kot vidite, nato je tu poklican dequeue, da odstrani funkcijo iz čakalne vrste. Nato se bo naš kvadrat premaknil v levo pol sekunde in prebarval nazaj v rdečo - s pomočjo druge uporabniške funkcije odstranimo razred newcolor. Ob koncu animacije zvijemo naš kvadrat:

html<button id="animate">start</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();
});

Primer

Dodajmo čakalno vrsto v obliki polja, da odstranimo prejšnjo. Ob kliku na gumb #start bomo videli animacijo iz prejšnjega primera. Ob kliku na gumb #stop bomo ustavili animacijo z dodajanjem praznega polja. Ob ponovnem kliku na #start se bo animacija znova začela:

html<button id="start">start</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();
});

Glejte tudi