Question

我知道jQuery中对$（function（）{}）的调用是按照定义的顺序执行的，但是我想知道你是否可以控制队列的顺序？

例如，是否可以在“Hello World 1”之前调用“Hello World 2”：

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

问题在于它是否可能......我已经知道它违背了最佳做法;）

Answer 1

以下是您将如何做到这一点：

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

您可以阅读更多相关信息here

Answer 2

这些函数被添加到私有数组readyList，所以我说它无法进行操作。

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

Answer 3

您可以使用jQuery promise来实现这样的目标。

以下是jQuery.ready.promise帮助管理DOM Ready Blocks执行顺序的示例：

在下面的示例中，第一个DOM Ready块正在尝试访问测试div的高度，该高度附加到后面的DOM Ready块中的主体。就像在小提琴中一样，它无法得到它。

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

小提琴：http://jsfiddle.net/geektantra/qSHec/

在下面的示例中，它与使用jQuery.ready.promise之前的示例完全相同。就像在小提琴中一样，它可以按要求工作。

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

小提琴：http://jsfiddle.net/geektantra/48bRT/

Answer 4

可以做到，但不容易。你必须自己破解jQuery，可能是here。在jQuery开始在while循环中调用这些函数之前，您必须添加代码来检查readyList数组并根据您的偏好重新排序元素。

jQuery多文档就绪队列顺序

4 个答案: