Метад queue

Метад queue дазваляе нам працаваць з чаргой функцый, прывязаных да элемента. Глядзіце таксама метад clearQueue, які дазваляе нам выдаліць з чаргі ўсе функцыі, якія не былі запушчаны.

Сінтаксіс

Так мы паказваем чаргу выконваемых функцый, прывязаных да элемента. Можна перадаць неабавязковым параметрам назву чаргі у выглядзе радка (па змаўчанні fx - стандартная чарга эфектаў):

javascript.queue([імё чаргі]);

Мы можам маніпуляваць чаргой. Выконваецца адзін раз для кожнага элемента. Для гэтага можна перадаць другім параметрам масіў функцый, якія заменяць змесціва бягучай чаргі:

javascript.queue([імё чаргі], новая чарга );

А можна другім параметрам перадаць новую callback-функцыю для дабаўлення ў чаргу. Гэтая функцыя ў сваю чаргу атрымлівае іншую функцыю ў якасці параметра. Гэта дазваляе аўтаматычна прыбіраць з чаргі наступны элемент і рухаць чаргу:

javascript.queue([імё чаргі], callback-функцыя(next) {
  next();
});

Кожны элемент можа мець адну або некалькі чарг. У многіх прыкладаннях выкарыстоўваецца толькі адна (fx). Чаргі дазваляюць ажыццяўляць паслядоўнасць дзеянняў з элементам асінхронна, без перапынення выканання праграмы. Выклік queue з callback-функцыяй дазваляе нам змясціць новую функцыю ў канец чаргі. callback-функцыя выконваецца адзін раз для кожнага элемента ў наборы. Пры дабаўленні функцыі з дапамогай queue, мы павінны ўпэўніцца, што потым будзе выкліканы метад dequeue, для таго каб наступная функцыя ў ланцужку запрацавала.

Прыклад

Давайце дададзім карыстальніцкую функцыю. Спачатку, пасля націску на #animate, мы пакажам чырвоны квадрат, які будзе рухацца ўправа на працягу 2с, затым пры дапамозе queue мы дададзім карыстальніцкую функцыю, якая перафарбуе квадрат у зялёны, дадаўшы клас newcolor. Як бачыце, затым тут выклікаецца dequeue, каб прыбраць функцыю з чаргі. Затым наш квадрат будзе рухацца ўлева паўсекунды і перафарбуецца назад у чырвоны - пры дапамозе другой карыстальніцкай функцыі мы прыбіраем клас newcolor. Па заканчэнні анімацыі мы згортваем наш квадрат:

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

Прыклад

Давайце дададзім чаргу ў выглядзе масіва, каб выдаліць попельную. Пры націску на кнопку #start мы будзем бачыць анімацыю з папярэдняга прыкладу. Пры націску на кнопку #stop мы будзем спыняць анімацыю шляхам дабаўлення пустога масіва. Пры паўторным націску на #start анімацыя будзе пачынацца нанова:

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

Глядзіце таксама