jQuery 多文档就绪队列顺序

发布于 2024-09-14 10:10:42 字数 268 浏览 3 评论 0原文

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

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

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

问题是是否可能......我已经知道这违背了最佳实践；）

原文

I know calls to $(function(){ }) in jQuery are executed in the order that they are defined, but I'm wondering if you can control the order of the queue?

For example, is it possible to call "Hello World 2" before "Hello World 1":

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

The question is whether or not it's possible... I already know it goes against best practice ;)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

与酒说心事 2024-09-21 10:10:42

以下是您的操作方法：

// 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 is how you would go about doing it:

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

You can read more about it here

回复收藏 0 原文

梦里南柯 2024-09-21 10:10:42

这些函数被添加到私有数组 readyList 中，因此我认为它无法进行操作。

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

回复收藏 0 原文

岁吢 2024-09-21 10:10:42

你可以使用 jQuery Promise 来实现这样的事情。

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

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

jQuery(function () {
    var testDivHeight = jQuery("#test-div").outerHeight();
    如果（测试DivHeight）{
        alert("测试div的高度为："+testDivHeight);
    } 别的 {
        Alert("抱歉，我无法获取测试 div 的高度！");
    }
});
jQuery(函数 () {
    jQuery('body').append('');
});

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

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

jQuery(function () {
    jQuery.ready.promise().done(function () {
        var testDivHeight = jQuery("#test-div").outerHeight();
        如果（测试DivHeight）{
            alert("测试div的高度为："+testDivHeight);
        } 别的 {
            Alert("抱歉，我无法获取测试 div 的高度！");
        }
    });
});
jQuery(函数 () {
    jQuery('body').append('');
});

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

You can use jQuery promise to achieve something like this.

Following is an example where jQuery.ready.promise helps managing the order of execution of DOM Ready Blocks:

In the following example, the first DOM Ready block is trying to access the height of the test div which is appended to the body in a later DOM Ready block. As in the Fiddle it fails to get it.

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/

In the following example, it is doing exactly the same as the example before using jQuery.ready.promise. As in the Fiddle it works as required.

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/

回复收藏 0 原文