JQuery.com belgesini buldum queue()/ dequeue()anlamak çok basit. JQuery'deki kuyruklar tam olarak nedir? Onları nasıl kullanmalıyım?

JQuery .queue()ve kullanımı.dequeue()

JQuery'deki kuyruklar animasyonlar için kullanılır. Bunları istediğiniz herhangi bir amaç için kullanabilirsiniz. Bunlar, her eleman için ayrı ayrı saklanan fonksiyon dizisidirjQuery.data() . Bunlar, İlk Giren İlk Çıkar (FIFO). Kuyruğa çağırarak bir işlev ekleyebilirsiniz .queue()ve kullanarak işlevleri çağırabilirsiniz (çağırarak) .dequeue().

Dahili jQuery kuyruğu işlevlerini anlamak için , kaynağı okumak ve örneklere bakmak bana çok yardımcı oluyor. Gördüğüm bir kuyruk işlevinin en iyi örneklerinden biri .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 );
  });
};

Varsayılan kuyruk - fx

JQuery varsayılan kuyruk olduğunu fx. Varsayılan kuyruk, diğer kuyruklarla paylaşılmayan bazı özel özelliklere sahiptir.

1. Otomatik Başlatma: Kuyruk çağrıldığında $(elem).queue(function(){});, fxsıradaki dequeueişlev otomatik olarak başlar ve kuyruk başlamazsa çalıştırır.
2. 'InProgress' gözcü: Ne zaman isterseniz dequeue()bir işlev fxkuyruğunda, bu olacak unshift()(dizinin ilk konuma itme) dize "inprogress"- hangi kuyruk halen çalıştırılıyor olduğunu bayraklar.
3. Bu varsayılan! fxSıra tarafından kullanılan .animate()varsayılan olarak diyoruz ve tüm fonksiyonları.

NOT: Özel bir kuyruk kullanıyorsanız .dequeue(), işlevleri manuel olarak yapmanız gerekir , bunlar otomatik olarak başlamaz!

Kuyruğu Alma / Ayarlama

.queue()İşlev bağımsız değişkeni olmadan çağırarak bir jQuery kuyruğuna başvuru alabilirsiniz . Kuyrukta kaç öğe olduğunu görmek istiyorsanız yöntemi kullanabilirsiniz. Sen kullanabilirsiniz push, pop, unshift, shiftyerinde kuyruğu işlemek için. İşleve bir dizi ileterek tüm kuyruğu değiştirebilirsiniz .queue().

Hızlı Örnekler:

// 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)); 

Bir animasyon ( fx) kuyruğu örneği:

Örnek jsFiddle'da çalıştır

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

Başka bir özel kuyruk örneği

Örnek jsFiddle'da çalıştır

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');

Kuyruk Ajax Çağrıları:

Bir geliştirilen $.ajaxQueue()kullanır eklentisi $.Deferred, .queue()ve $.ajax()aynı zamanda bir geri vermek için söz eğer istek tamamlanana çözülür. $.ajaxQueue1.4'te hala çalışan başka bir sürümü, Ajax İsteklerini Sıralamak için verdiğim yanıta gönderildi

/*
* 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);

Şimdi bunu learn.jquery.com'da bir makale olarak ekledim , bu sitede sıralar hakkında başka harika makaleler var, bak bak.

Kuyruk yöntemini anlamak için jQuery'nin nasıl animasyon yaptığını anlamalısınız. Birbiri ardına birden çok animasyon yöntemi çağrısı yazarsanız, jQuery bir 'iç' kuyruk oluşturur ve bu yöntem çağrılarını buna ekler. Sonra bu animasyon çağrılarını tek tek çalıştırır.

Aşağıdaki kodu göz önünde bulundurun.

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

'Kuyruk' / 'dequeue' yöntemi size bu 'animasyon kuyruğu' üzerinde kontrol sağlar.

Varsayılan olarak animasyon kuyruğu 'fx' olarak adlandırılır. Burada kuyruk yönteminin nasıl kullanılabileceğini gösteren çeşitli örnekler içeren bir örnek sayfa oluşturdum.

http://jsbin.com/zoluge/1/edit?html,output

Yukarıdaki örnek sayfanın kodu:

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

Şimdi sorabilirsin, neden bu kuyrukla uğraşayım? Normalde alışkanlık yapmazsınız. Ancak kontrol etmek istediğiniz karmaşık bir animasyon diziniz varsa, sıra / dequeue yöntemleri arkadaşınızdır.

Ayrıca karmaşık bir animasyon dizisi oluşturma hakkında jQuery grubundaki bu ilginç sohbete bakın.

http://groups.google.com/group/jquery-en/browse_thread/thread/b398ad505a9b0512/f4f3e841eab5f5a2?lnk=gst

Animasyonun demosu:

http://www.exfer.net/test/jquery/tabslide/

Hala sorularınız varsa bana bildirin.

Bir kuyrukta birden çok nesne animasyonu

Bir kuyruktaki birden çok nesne animasyonuna basit bir örnek.

Jquery, sadece bir nesne üzerinde kuyruk oluşturmamızı sağladı. Ancak animasyon işlevi içinde diğer nesnelere erişebiliriz. Bu örnekte, # box1 ve # box2 nesnelerini canlandırırken kuyruğumuzu #q nesnesi üzerinde oluşturuyoruz.

Kuyruğu bir dizi işlev olarak düşünün. Böylece kuyruğu bir dizi olarak işleyebilirsiniz. Kuyruğu değiştirmek için push, pop, unshift, shift tuşlarını kullanabilirsiniz. Bu örnekte, animasyon kuyruğundan son işlevi kaldırır ve başında ekleriz.

İşimiz bittiğinde, dequeue () işleviyle animasyon sırasını başlatırız.

JsFiddle'da bakın

html:

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

css:

        #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; }  

Animasyonları sıralamanıza izin verir ... örneğin, bunun yerine

$('#my-element').animate( { opacity: 0.2, width: '100px' }, 2000);

Bu da öğeyi soldurur ve aynı anda genişliği 100 piksel yapar . Kuyruğu kullanmak, animasyonları sahne almanıza olanak tanır. Yani biri birbiri ardına bitiyor.

$("#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 sayfasından örnek

Bu konu benim sorunumda bana çok yardımcı oldu, ancak $ .queue'u farklı bir şekilde kullandım ve buraya geldiğim şeyi göndereceğimi düşündüm. İhtiyacım olan tetiklenecek olaylar dizisi (kare), ama dinamik olarak inşa edilecek dizisi oldu. Her biri hareketli bir görüntü dizisi içermesi gereken değişken sayıda yer tutucum var. Veriler bir dizi dizide tutulur, bu yüzden dizileri bu şekilde yer tutucular için her bir diziyi oluşturmak üzere döngülerim:

/* 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');

Bu, geldiğim komut dosyasının basitleştirilmiş bir sürümüdür, ancak ilkeyi göstermelidir - kuyruğa bir işlev eklendiğinde, İşlev yapıcısı kullanılarak eklenir - bu şekilde işlev döngüdeki değişkenler kullanılarak dinamik olarak yazılabilir ( s). Fonksiyonun sonraki () çağrısı için bağımsız değişkeni geçirme biçimine dikkat edin ve sonunda çağrılır. Bu durumda fonksiyonun zamana bağımlılığı yoktur ($ .fadeIn ya da bunun gibi bir şey kullanmaz), bu yüzden kareleri $ .delay kullanarak kademelendiriyorum.

İşlev makeRedve makeBlackkullanımı queueve dequeuebirbirini yürütmek için. Bunun etkisi, '#wow' öğesinin sürekli yanıp sönmesidir.

<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>