jQuery ред на опашката за готови документи

Знам, че извикванията на $(function(){ }) в jQuery се изпълняват в реда, в който са дефинирани, но се чудя дали можете да контролирате реда на опашката?

Например, възможно ли е да се извика "Hello World 2" преди "Hello World 1":

$(function(){ alert('Hello World 1') });
$(function(){ alert('Hello World 2') });

Въпросът е дали е възможно или не... Вече знам, че противоречи на най-добрата практика ;)


jquery document-ready domready
person Derek Hunziker    schedule 13.08.2010    source източник
comment
Защо бихте дефинирали 2 различни $(function() { } блока? Просто бих използвал 1 и бих поставил нещата отгоре надолу в реда на изпълнение.   -  person Gregg    schedule 13.08.2010
comment
@Gregg: Помислете за ситуация, в която използвате инструмент на трета страна на сайта си, който използва jQuery и document.ready. Освен това помислете, че може да искате да добавите код към вашата страница, който разчита на това, че документът.ready на трета страна се изпълнява първо, преди вашия. Не винаги е лесно да се контролира или предвиди редът на работа.   -  person Mir    schedule 08.03.2012

Отговори (4)


arrow_upward
3
arrow_downward

Тези функции се добавят към частен масив readyList, така че бих казал, че не е достъпен за манипулиране.

http://github.com/jquery/jquery/blob/master/src/core.js#L47

person user113716    schedule 13.08.2010

arrow_upward
7
arrow_downward

ето как бихте го направили:

// lower priority value means function should be called first
var method_queue = new Array();

method_queue.push({
  method : function()
  { 
    alert('Hello World 1');
  },
  priority : 2
});

method_queue.push({
  method : function()
  { 
    alert('Hello World 2');
  },
  priority : 1
});


function sort_queue(a, b)
{
  if( a.priority < b.priority ) return -1;
  else if( a.priority == b.priority ) return 0;
  else return 1;  
}

function execute_queue()
{
  method_queue.sort( sort_queue );

  for( var i in method_queue ) method_queue[i].call( null );
}

// now all you have to do is 
execute_queue();

Можете да прочетете повече за това тук

person ovais.tariq    schedule 13.08.2010

arrow_upward
2
arrow_downward

Можете да използвате обещанието на jQuery, за да постигнете нещо подобно.

Следва пример, при който jQuery.ready.promise помага за управлението на реда на изпълнение на DOM Ready Blocks:

  1. В следващия пример първият DOM Ready блок се опитва да получи достъп до височината на тестовия div, който е добавен към тялото в по-късен DOM Ready блок. Както във Fiddle не успява да го получи.

    jQuery(function () {
    var testDivHeight = jQuery("#test-div").outerHeight();
    if(testDivHeight) {
        alert("Height of test div is: "+testDivHeight);
    } else {
        alert("Sorry I cannot get the height of test div!");
    }
});
jQuery(function () {
    jQuery('body').append('<div style="background: #C00; height: 100px;" id="test-div"></div>');
});

    Fiddle: http://jsfiddle.net/geektantra/qSHec/

  2. В следващия пример той прави точно същото като примера преди да използва jQuery.ready.promise. Както във Fiddle, той работи според изискванията.

    jQuery(function () {
    jQuery.ready.promise().done(function () {
        var testDivHeight = jQuery("#test-div").outerHeight();
        if(testDivHeight) {
            alert("Height of test div is: "+testDivHeight);
        } else {
            alert("Sorry I cannot get the height of test div!");
        }
    });
});
jQuery(function () {
    jQuery('body').append('<div style="background: #C00; height: 100px;" id="test-div"></div>');
});

    Fiddle: http://jsfiddle.net/geektantra/48bRT/

person GeekTantra    schedule 30.04.2013

arrow_upward
1
arrow_downward

Може да се направи, но не лесно. Ще трябва да хакнете самия jQuery, вероятно тук. Преди jQuery да започне да извиква тези функции в цикъла while, ще трябва да добавите код, за да инспектирате масива readyList и да пренаредите елементите според вашите предпочитания.

person Ken Redler    schedule 13.08.2010