Metoda queue

Metoda queue pozwala nam pracować z kolejką funkcji powiązanych z elementem. Zobacz także metodę clearQueue, która pozwala nam usunąć z kolejki wszystkie funkcje, które nie zostały uruchomione.

Składnia

W ten sposób wyświetlamy kolejkę wykonywanych funkcji, powiązanych z elementem. Można przekazać opcjonalnym parametrem nazwę kolejki w postaci ciągu znaków (domyślnie fx - standardowa kolejka efektów):

javascript.queue([nazwa kolejki]);

Możemy manipulować kolejką. Wykonuje się raz dla każdego elementu. W tym celu można przekazać jako drugi parametr tablicę funkcji, które zastąpią zawartość bieżącej kolejki:

javascript.queue([nazwa kolejki], nowa kolejka );

Można też jako drugi parametr przekazać nową funkcję callback do dodania do kolejki. Ta funkcja z kolei otrzymuje inną funkcję jako parametr. To pozwala automatycznie usuwać z kolejki następny element i przesuwać kolejkę:

javascript.queue([nazwa kolejki], funkcja-callback(next) {
  next();
});

Każdy element może mieć jedną lub więcej kolejek. W wielu aplikacjach używana jest tylko jedna (fx). Kolejki pozwalają na realizację sekwencji działań na elemencie asynchronicznie, bez przerywania wykonania programu. Wywołanie queue z funkcją callback pozwala nam umieścić nową funkcję na końcu kolejki. Funkcja callback wykonuje się raz dla każdego elementu w zestawie. Przy dodawaniu funkcji za pomocą queue, musimy się upewnić, że później zostanie wywołana metoda dequeue, aby następna funkcja w łańcuchu zadziałała.

Przykład

Dodajmy niestandardową funkcję. Najpierw, po naciśnięciu #animate, pokażemy czerwony kwadrat, który będzie przesuwał się w prawo przez 2s, następnie przy pomocy queue dodamy niestandardową funkcję, która przemaluje kwadrat na zielony, dodając klasę newcolor. Jak widać, następnie tutaj wywoływane jest dequeue, aby usunąć funkcję z kolejki. Następnie nasz kwadrat będzie przesuwał się w lewo przez pół sekundy i przemaluje się z powrotem na czerwony - przy pomocy drugiej funkcji niestandardowej usuwamy klasę newcolor. Po zakończeniu animacji zwijamy nasz kwadrat:

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

Przykład

Dodajmy kolejkę w postaci tablicy, aby usunąć poprzednią. Po naciśnięciu przycisku #start będziemy widzieć animację z poprzedniego przykładu. Po naciśnięciu przycisku #stop będziemy zatrzymywać animację poprzez dodanie pustej tablicy. Po ponownym naciśnięciu #start animacja będzie zaczynać się od nowa:

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

Zobacz też