मैंने पाया कि jQuery.com दस्तावेज़ queue()/ dequeue()समझने के लिए बहुत सरल है। वास्तव में jQuery में कतारें क्या हैं? मुझे उनका उपयोग कैसे करना चाहिए?
जवाबों:
.queue()और का उपयोग करता है.dequeue()JQuery में कतारों का उपयोग एनिमेशन के लिए किया जाता है। आप उन्हें किसी भी उद्देश्य के लिए उपयोग कर सकते हैं जो आपको पसंद है। वे एक तत्व के आधार पर संग्रहीत कार्यों के एक सरणी हैं, का उपयोग करते हुए jQuery.data()। वे फर्स्ट-इन-फर्स्ट-आउट (FIFO) हैं। आप कॉल करके कतार में एक फ़ंक्शन जोड़ सकते हैं .queue(), और आप फ़ंक्शन का उपयोग करके (कॉल करके) निकाल सकते हैं .dequeue()।
आंतरिक jQuery कतार कार्यों को समझने के लिए, स्रोत को पढ़ने और उदाहरणों को देखने से मुझे काफी मदद मिलती है। मैंने देखा है एक कतार समारोह का सबसे अच्छा उदाहरण है .delay():
$.fn.delay = function( time, type ) {
time = jQuery.fx ? jQuery.fx.speeds[time] || time : time;
type = type || "fx";
return this.queue( type, function() {
var elem = this;
setTimeout(function() {
jQuery.dequeue( elem, type );
}, time );
});
};fxJQuery में डिफ़ॉल्ट कतार है fx। डिफ़ॉल्ट कतार में कुछ विशेष गुण होते हैं जिन्हें अन्य कतारों के साथ साझा नहीं किया जाता है।
$(elem).queue(function(){});fxdequeuedequeue()से कोई कार्य करते fxहैं, तो यह unshift()स्ट्रिंग के पहले स्थान पर पहुंच जाएगा (स्ट्रिंग के पहले स्थान पर) "inprogress"- जो ध्वज को दर्शाता है कि वर्तमान में कतार चल रही है।fxकतार से प्रयोग किया जाता है .animate()और सभी कार्यों है कि यह डिफ़ॉल्ट रूप से कहते हैं।नोट: यदि आप एक कस्टम कतार का उपयोग कर रहे हैं, तो आपको मैन्युअल रूप .dequeue()से फ़ंक्शन करना होगा , वे ऑटो स्टार्ट नहीं करेंगे!
आप .queue()एक फ़ंक्शन तर्क के बिना कॉल करके एक jQuery कतार का संदर्भ प्राप्त कर सकते हैं । आप विधि का उपयोग कर सकते हैं यदि आप यह देखना चाहते हैं कि कतार में कितने आइटम हैं। आप उपयोग कर सकते हैं push, pop, unshift, shiftजगह में कतार में हेरफेर करने के। आप .queue()फ़ंक्शन को एक सरणी पास करके पूरी कतार को बदल सकते हैं ।
त्वरित उदाहरण:
// lets assume $elem is a jQuery object that points to some element we are animating.
var queue = $elem.queue();
// remove the last function from the animation queue.
var lastFunc = queue.pop();
// insert it at the beginning:
queue.unshift(lastFunc);
// replace queue with the first three items in the queue
$elem.queue(queue.slice(0,3)); fx) कतार उदाहरण:$(function() {
// lets do something with google maps:
var $map = $("#map_canvas");
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {zoom: 8, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP};
var geocoder = new google.maps.Geocoder();
var map = new google.maps.Map($map[0], myOptions);
var resized = function() {
// simple animation callback - let maps know we resized
google.maps.event.trigger(map, 'resize');
};
// wait 2 seconds
$map.delay(2000);
// resize the div:
$map.animate({
width: 250,
height: 250,
marginLeft: 250,
marginTop:250
}, resized);
// geocode something
$map.queue(function(next) {
// find stackoverflow's whois address:
geocoder.geocode({'address': '55 Broadway New York NY 10006'},handleResponse);
function handleResponse(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var location = results[0].geometry.location;
map.setZoom(13);
map.setCenter(location);
new google.maps.Marker({ map: map, position: location });
}
// geocoder result returned, continue with animations:
next();
}
});
// after we find stack overflow, wait 3 more seconds
$map.delay(3000);
// and resize the map again
$map.animate({
width: 500,
height: 500,
marginLeft:0,
marginTop: 0
}, resized);
});var theQueue = $({}); // jQuery on an empty object - a perfect queue holder
$.each([1,2,3],function(i, num) {
// lets add some really simple functions to a queue:
theQueue.queue('alerts', function(next) {
// show something, and if they hit "yes", run the next function.
if (confirm('index:'+i+' = '+num+'\nRun the next function?')) {
next();
}
});
});
// create a button to run the queue:
$("<button>", {
text: 'Run Queue',
click: function() {
theQueue.dequeue('alerts');
}
}).appendTo('body');
// create a button to show the length:
$("<button>", {
text: 'Show Length',
click: function() {
alert(theQueue.queue('alerts').length);
}
}).appendTo('body');मैं एक विकसित $.ajaxQueue()का उपयोग करता है प्लगइन $.Deferred, .queue()और $.ajax()भी वापस एक पारित करने के लिए वादा है कि हल हो गई है जब अनुरोध पूरा करती है। $.ajaxQueue1.4 में काम करने वाला एक अन्य संस्करण अभी भी मेरे उत्तर पर अजाक्स अनुरोधों को प्राप्त करने के लिए पोस्ट किया गया है
/*
* jQuery.ajaxQueue - A queue for ajax requests
*
* (c) 2011 Corey Frang
* Dual licensed under the MIT and GPL licenses.
*
* Requires jQuery 1.5+
*/
(function($) {
// jQuery on an empty object, we are going to use this as our Queue
var ajaxQueue = $({});
$.ajaxQueue = function( ajaxOpts ) {
var jqXHR,
dfd = $.Deferred(),
promise = dfd.promise();
// queue our ajax request
ajaxQueue.queue( doRequest );
// add the abort method
promise.abort = function( statusText ) {
// proxy abort to the jqXHR if it is active
if ( jqXHR ) {
return jqXHR.abort( statusText );
}
// if there wasn't already a jqXHR we need to remove from queue
var queue = ajaxQueue.queue(),
index = $.inArray( doRequest, queue );
if ( index > -1 ) {
queue.splice( index, 1 );
}
// and then reject the deferred
dfd.rejectWith( ajaxOpts.context || ajaxOpts,
[ promise, statusText, "" ] );
return promise;
};
// run the actual query
function doRequest( next ) {
jqXHR = $.ajax( ajaxOpts )
.done( dfd.resolve )
.fail( dfd.reject )
.then( next, next );
}
return promise;
};
})(jQuery);मैंने अब इसे learn.jquery.com पर एक लेख के रूप में जोड़ दिया है , कतारों के बारे में उस साइट पर अन्य महान लेख हैं, देखो।
$(window)?
$({})
कतार विधि को समझने के लिए, आपको यह समझना होगा कि jQuery एनीमेशन कैसे करता है। यदि आप एक के बाद एक कई चेतन विधि लिखते हैं, तो jQuery एक 'आंतरिक' कतार बनाता है और इन विधियों को इसमें जोड़ता है। फिर यह उन चेतन कॉल को एक-एक करके चलाता है।
निम्नलिखित कोड पर विचार करें।
function nonStopAnimation()
{
//These multiple animate calls are queued to run one after
//the other by jQuery.
//This is the reason that nonStopAnimation method will return immeidately
//after queuing these calls.
$('#box').animate({ left: '+=500'}, 4000);
$('#box').animate({ top: '+=500'}, 4000);
$('#box').animate({ left: '-=500'}, 4000);
//By calling the same function at the end of last animation, we can
//create non stop animation.
$('#box').animate({ top: '-=500'}, 4000 , nonStopAnimation);
}'कतार' / 'dequeue' पद्धति आपको इस 'एनीमेशन कतार' पर नियंत्रण देती है।
डिफ़ॉल्ट रूप से एनीमेशन कतार को 'fx' नाम दिया गया है। मैंने यहां एक नमूना पृष्ठ बनाया है जिसमें विभिन्न उदाहरण हैं जो बताएंगे कि कतार विधि का उपयोग कैसे किया जा सकता है।
http://jsbin.com/zoluge/1/edit?html,output
उपरोक्त नमूना पृष्ठ के लिए कोड:
$(document).ready(function() {
$('#nonStopAnimation').click(nonStopAnimation);
$('#stopAnimationQueue').click(function() {
//By default all animation for particular 'selector'
//are queued in queue named 'fx'.
//By clearning that queue, you can stop the animation.
$('#box').queue('fx', []);
});
$('#addAnimation').click(function() {
$('#box').queue(function() {
$(this).animate({ height : '-=25'}, 2000);
//De-queue our newly queued function so that queues
//can keep running.
$(this).dequeue();
});
});
$('#stopAnimation').click(function() {
$('#box').stop();
});
setInterval(function() {
$('#currentQueueLength').html(
'Current Animation Queue Length for #box ' +
$('#box').queue('fx').length
);
}, 2000);
});
function nonStopAnimation()
{
//These multiple animate calls are queued to run one after
//the other by jQuery.
$('#box').animate({ left: '+=500'}, 4000);
$('#box').animate({ top: '+=500'}, 4000);
$('#box').animate({ left: '-=500'}, 4000);
$('#box').animate({ top: '-=500'}, 4000, nonStopAnimation);
}अब आप पूछ सकते हैं, मुझे इस कतार से क्यों परेशान होना चाहिए? आम तौर पर, आप अभ्यस्त। लेकिन यदि आपके पास एक जटिल एनीमेशन अनुक्रम है जिसे आप नियंत्रित करना चाहते हैं, तो कतार / डक्यू विधियां आपके मित्र हैं।
जटिल एनीमेशन अनुक्रम बनाने के बारे में jQuery समूह पर यह दिलचस्प बातचीत भी देखें।
एनिमेशन का डेमो:
http://www.exfer.net/test/jquery/tabslide/
मुझे पता है अगर आप अभी भी प्रश्न हैं।
यहाँ एक कतार में कई वस्तुओं के एनीमेशन का एक सरल उदाहरण है।
Jquery हमें केवल एक वस्तु पर कतार बनाने के लिए बदल देता है। लेकिन एनीमेशन फ़ंक्शन के भीतर हम अन्य वस्तुओं तक पहुंच सकते हैं। इस उदाहरण में हम # बॉक्स 1 और # बॉक्स 2 ऑब्जेक्ट्स को एनिमेट करते हुए #Q ऑब्जेक्ट पर अपनी कतार बनाते हैं।
कार्यों की एक सरणी के रूप में कतार के बारे में सोचो। तो आप एक सरणी के रूप में कतार में हेरफेर कर सकते हैं। आप कतार में हेरफेर करने के लिए पुश, पॉप, अनशिफ्ट, शिफ्ट का उपयोग कर सकते हैं। इस उदाहरण में हम एनीमेशन कतार से अंतिम फ़ंक्शन को हटाते हैं और इसे शुरुआत में सम्मिलित करते हैं।
जब हम कर रहे हैं, हम dequeue () फ़ंक्शन द्वारा एनीमेशन कतार शुरू करते हैं।
एचटीएमएल:
<button id="show">Start Animation Queue</button>
<p></p>
<div id="box1"></div>
<div id="box2"></div>
<div id="q"></div>js:
$(function(){
$('#q').queue('chain',function(next){
$("#box2").show("slow", next);
});
$('#q').queue('chain',function(next){
$('#box1').animate(
{left: 60}, {duration:1000, queue:false, complete: next}
)
});
$('#q').queue('chain',function(next){
$("#box1").animate({top:'200'},1500, next);
});
$('#q').queue('chain',function(next){
$("#box2").animate({top:'200'},1500, next);
});
$('#q').queue('chain',function(next){
$("#box2").animate({left:'200'},1500, next);
});
//notice that show effect comes last
$('#q').queue('chain',function(next){
$("#box1").show("slow", next);
});
});
$("#show").click(function () {
$("p").text("Queue length is: " + $('#q').queue("chain").length);
// remove the last function from the animation queue.
var lastFunc = $('#q').queue("chain").pop();
// insert it at the beginning:
$('#q').queue("chain").unshift(lastFunc);
//start animation queue
$('#q').dequeue('chain');
});सीएसएस:
#box1 { margin:3px; width:40px; height:40px;
position:absolute; left:10px; top:60px;
background:green; display: none; }
#box2 { margin:3px; width:40px; height:40px;
position:absolute; left:100px; top:60px;
background:red; display: none; }
p { color:red; } यह आपको एनिमेशन को कतारबद्ध करने की अनुमति देता है ... उदाहरण के लिए, इसके बजाय
$('#my-element').animate( { opacity: 0.2, width: '100px' }, 2000);जो तत्व को फीका करता है और एक ही समय में चौड़ाई 100 px बनाता है । कतार का उपयोग करने से आप एनिमेशन का मंचन कर सकते हैं। तो एक के बाद एक खत्म।
$("#show").click(function () {
var n = $("div").queue("fx");
$("span").text("Queue length is: " + n.length);
});
function runIt() {
$("div").show("slow");
$("div").animate({left:'+=200'},2000);
$("div").slideToggle(1000);
$("div").slideToggle("fast");
$("div").animate({left:'-=200'},1500);
$("div").hide("slow");
$("div").show(1200);
$("div").slideUp("normal", runIt);
}
runIt();Http://docs.jquery.com/Effects/queue से उदाहरण
इस धागे ने मेरी समस्या को सुलझाने में बहुत मदद की, लेकिन मैंने अलग तरीके से $ .ue का उपयोग किया है और मुझे लगा कि मैं यहाँ क्या लेकर आया हूँ। मुझे जिन चीज़ों की आवश्यकता थी, वे घटनाओं (फ्रेम) का एक क्रम था, लेकिन गतिशील रूप से बनाए जाने वाले अनुक्रम। मेरे पास प्लेसहोल्डर्स की एक चर संख्या है, जिनमें से प्रत्येक में छवियों का एक एनिमेटेड अनुक्रम होना चाहिए। डेटा को सरणी के एक सरणी में रखा जाता है, इसलिए मैं इस तरह के प्रत्येक प्लेसहोल्डर्स के लिए प्रत्येक अनुक्रम बनाने के लिए सरणियों के माध्यम से लूप करता हूं:
/* create an empty queue */
var theQueue = $({});
/* loop through the data array */
for (var i = 0; i < ph.length; i++) {
for (var l = 0; l < ph[i].length; l++) {
/* create a function which swaps an image, and calls the next function in the queue */
theQueue.queue("anim", new Function("cb", "$('ph_"+i+"' img').attr('src', '/images/"+i+"/"+l+".png');cb();"));
/* set the animation speed */
theQueue.delay(200,'anim');
}
}
/* start the animation */
theQueue.dequeue('anim');यह उस स्क्रिप्ट का एक सरलीकृत संस्करण है जिस पर मैं आया हूं, लेकिन सिद्धांत को दिखाना चाहिए - जब एक फ़ंक्शन को कतार में जोड़ा जाता है, तो इसे फंक्शन कन्स्ट्रक्टर का उपयोग करके जोड़ा जाता है - इस तरह फ़ंक्शन को लूप से वेरिएबल का उपयोग करके गतिशील रूप से लिखा जा सकता है ( रों)। जिस तरह से फ़ंक्शन को अगले () कॉल के लिए तर्क पारित किया जाता है, उस पर ध्यान दें और इसे अंत में लागू किया जाता है। इस मामले में फ़ंक्शन का कोई समय निर्भरता नहीं है (यह $ .fadeIn या ऐसा कुछ भी उपयोग नहीं करता है), इसलिए मैं $ .delay का उपयोग करके फ़्रेम को डगमगाता हूं।
कार्य makeRedऔर makeBlackउपयोग queueऔर dequeueएक दूसरे को निष्पादित करने के लिए। इसका प्रभाव यह है कि, '#wow' तत्व लगातार झपकाता है।
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#wow').click(function(){
$(this).delay(200).queue(makeRed);
});
});
function makeRed(){
$('#wow').css('color', 'red');
$('#wow').delay(200).queue(makeBlack);
$('#wow').dequeue();
}
function makeBlack(){
$('#wow').css('color', 'black');
$('#wow').delay(200).queue(makeRed);
$('#wow').dequeue();
}
</script>
</head>
<body>
<div id="wow"><p>wow</p></div>
</body>
</html>