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

Question

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

javascriptjqueryeventsdocument-ready

11

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

是否有任何方法来处理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。

因此，我想要一个通用解决方案，可以将a强制放置在jQuery的内部readyList的开头，或者钩入jQuery的ready函数并安全地编辑它，以便在readyList中的任何其他函数之前调用a。

[进一步编辑]

如果可能的话，我不想重新设计JavaScript代码执行顺序或触及任何其他代码，除了函数a()。我知道重组代码可以解决这个问题，但我宁愿只编写一个单独的函数，就像

$.beforeReady(function a() {});

- Raynos

当您需要添加在beforeReady函数之前运行的代码时，您会怎么做？您会添加一个beforeBeforeReady吗？有时候您只需要咬紧牙关，做必须要做的事情，并修复代码使其更加合理。 - Jani Hartikainen

@Jani 你可能有一个有效的观点。但我宁愿创建一个 beforeReady，然后用 .bind("loaded") 替换所有出现的 .ready，并用 .bind("setup") 替换 beforeReady。 - Raynos

这个问题应该在下一个版本的jQuery中得到解决：https://github.com/jquery/jquery/pull/80 - Mottie

@fudgey，您是在指他说准备系统将在1.5版中进行改进的事实吗？ - Raynos

我不知道核心的整改实际时间表，也不知道那个具体的变化是否会被添加进去。我的意思是要说明这是一个已知问题，并将在未来版本中修复。抱歉=( - Mottie

3个回答

0

$(document).ready() 或者简单地说 $(function(){}) 只是一个.addEventListener的实现（虽然不完全一样，但很接近），这意味着你可以在之前和之后添加监听器。

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

等等，把函数嵌套起来并不难。我认为没有必要去修改.ready()。

- BGerrissen

我宁愿不用担心代码中的包含文件的确切顺序，而是在代码中设置顺序。 - Raynos

嗯，也许你应该停止在各个地方粘贴 .ready()。我通常只在一个地方使用单个 .ready()，在其中初始化所有插件，并将其保留在单个文件中，除此之外没有其他内容（意味深长）。;) - BGerrissen

2

如果我有时间编辑整个遗留项目，让它像那样工作，我会这么做。但目前我只能逐步改进。 - Raynos

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>

- EamonnM

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jacob Relkin · Accepted Answer

这将是一个时机，我会触发一个自定义事件, 所有其他文件都将绑定(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'):
});