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

Տես նաև