在$(document).ready()之前运行一个函数

时间:2010-11-04 15:51:27

标签: javascript jquery events document-ready

我已将多个文件中的多个函数附加到$(document).ready,并希望将单个函数附加到它们之前作为$(document).ready处理的第一个函数或者在$之前独立触发的函数(文件).ready handler。

有没有办法处理jQuery在内部作为jQuery.fn.ready的一部分触发的函数的顺序,或挂钩在jQuery.fn.ready之前调用的函数。

在第三方脚本中编辑jQuery.fn.ready是安全的,还是会在其他第三方插件中造成可怕的连锁效果(除了编辑jQuery.fn.ready本身的插件)

[编辑]:

作为例子

$(document).ready(function b() {});
....
$(document).ready(function a() {/* optional setup*/});
....
$(document).ready(function c() {});

函数a首先需要与订单无关,但只能在几页上调用。我不能保证b或c的顺序,所以我不能在b或c的开头触发自定义事件来触发a。

所以我想要一个通用的解决方案,我可以用它来强制放置一个jQuery的内部readyList或挂钩到jQuery的ready函数的开头并安全地编辑它,以便在readyList中的任何其他函数之前调用它。 p>

[进一步编辑]

如果可能的话,我宁愿不必重新设计javascript代码执行顺序,也不必触及除函数a()之外的任何其他代码。我知道重组会让我解决这个问题,但我宁愿写一个像

这样的函数
$.beforeReady(function a() {});

3 个答案:

答案 0 :(得分:16)

这将是我触发所有其他文件bind的自定义事件的时间,你只有一个ready处理程序,它可以执行操作,然后触发自定义事件

因此,在您的代码中的其他位置,您将使用

而不是使用$(document).ready
$(window).bind('setup', function() {
   //code here...
});

和/或

$(window).bind('loaded', function() {
   //some other code here...
});

在您唯一的ready处理程序中,您可以执行以下操作:

$(document).ready(function() {
   $(window).trigger('setup');
   $(window).trigger('loaded'):
});

答案 1 :(得分:0)

$(document).ready()或简称$(function(){})只是.addEventListener实现(不完全,但很接近),这意味着您可以在之前和之后添加侦听器。

$(document).ready(listener); // goes off first.
$(document).ready(otherListener); // goes off 2nd.

等等,将功能夹在中间并不难。 没有必要破解.ready() imo。

答案 2 :(得分:0)

我刚才遇到了同样的问题。我在GitHub上添加了一个小脚本,它添加了一个$ .beforeReady()函数。有趣:)

https://github.com/aim12340/jQuery-Before-Ready

只需在jQuery之后加载脚本,如下例所示:

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script src="jquery-before-ready.js"></script>
    </head>
    <body>
        <script>
            $(document).ready({
                alert("This function is declared first!")
            })
        </script>
        <script>
            $.beforeReady(function(){
                alert("This function is declared second but executes first!")
            })
        </script>        
    </body>
</html>