queue-metodi

queue-metodi mahdollistaa meille työskennellä elementtiin liitettyjen funktioiden jonon kanssa. Katso myös clearQueue-metodi, joka mahdollistaa meille poistaa jonosta kaikki funktiot, jotka eivät ole vielä käynnistyneet.

Syntaksi

Näin näytämme elementtiin liitettyjen suoritettavien funktioiden jonon. Voimme välittää valinnaisen parametrin jonon nimen merkkijonona (oletusarvoisesti fx - standardi efektijono):

javascript.queue([jonon nimi]);

Voimme manipuloida jonoa. Suoritetaan kerran jokaiselle elementille. Tätä varten voimme välittää toisena parametrina funktioita sisältävän taulukon, joka korvaa nykyisen jonon sisällön:

javascript.queue([jonon nimi], uusi jono );

Tai voimme toisena parametrina välittää uuden callback-funktion lisäämiseksi jonoon. Tämä funktio puolestaan vastaanottaa toisen funktion parametrina. Tämä mahdollistaa seuraavan elementin automaattisen poistamisen jonosta ja jonon liikuttamisen:

javascript.queue([jonon nimi], callback-funktio(next) {
  next();
});

Jokaisella elementillä voi olla yksi tai useampi jono. Monissa sovelluksissa käytetään vain yhtä (fx). Jonot mahdollistavat toimintojen sarjan suorittamisen elementillä asynkronisesti, ilman ohjelman suorituksen keskeyttämistä. queue-kutsu callback-funktiolla mahdollistaa meille sijoittaa uuden funktion jonon loppuun. callback-funktio suoritetaan kerran jokaiselle elementille joukossa. Kun funktio lisätään queue-metodilla, meidän täytyy varmistaa, että myöhemmin kutsutaan dequeue-metodia, jotta seuraava funktio ketjussa alkaa toimia.

Esimerkki

Lisätään mukautettu funktio. Ensin, #animate-painikkeen painamisen jälkeen, näytämme punaisen neliön, joka liikkuu oikealle 2s ajan, sitten queue-metodin avulla lisäämme mukautetun funktion, joka värjää neliön vihreäksi lisäämällä luokan newcolor. Kuten näette, tässä kutsutaan dequeue-metodia poistamaan funktio jonosta. Sitten neliömme liikkuu vasemmalle puolisen sekuntia ja värjätään takaisin punaiseksi - toisen mukautetun funktion avulla poistamme luokan newcolor. Animaation päätyttyä kutistamme neliömme:

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();
});

Esimerkki

Lisätään jono taulukkona poistaaksemme edellisen. Kun painamme #start-painiketta, näemme edellisen esimerkin animaation. Kun painamme #stop-painiketta, pysäytämme animaation lisäämällä tyhjän taulukon. Kun painamme uudelleen #start-painiketta, animaatio alkaa alusta:

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();
});

Katso myös