jQuery的.ready()函数会等待多久？

Question

我可以帮助您翻译以下内容，如下所示：

我有一个页面，php将在其中输出一个相当大的div，该div包含许多组件。用于处理该div的JS几乎即时开始，但涉及到加载bigDiv和处理其的脚本的时间问题。

因此，我应用了类似以下代码来在ready()中处理它

var bigDiv = $(document).find('#bigDiv');
bigDiv.ready(function{
    //some code here
});

现在我的问题是，如果bigDiv需要很长时间才能出现，ready()函数会等多久？ 如果bigDiv根本没有出现怎么办？

所以为了避免脚本等待它，我设置了一个超时时间，

因此我选择了另一种方法，像这样：

var waitTimer = 0;
var lodTmout  = 2000;
function chkDataLod(){
    var bigDiv = $pH(document).find('#bigDiv');
    if(bigDiv.length > 0){//find if bigDiv has content
        bigDiv.ready(function(){//wait for bigDiv to load it's contents completely
            //some code here
        });

    }else{
        //chk for bigDiv after every 500 msec for 2000 msec
        if(waitTimer === lodTmout){
            return false;
        }else{
            waitTimer += 500; 
            setTimeout('chkDataLod();',500);
        }      
    }
};

function _init(){
    chkDataLod();
}

_init();

起初我尝试检查bigDiv的内容长度是否大于零。当“未完全加载”的bigDiv被显示时，问题就出现了。所以我又添加了.ready()函数。我在bigDiv上有一些动画函数，我不想在它完全加载之前启动它们。

这个bigDiv是从CDN加载的，因此加载时间变化很大。有一天它花了近5秒钟才加载完成。根据我的方法，我知道它存在问题。我正在使用setTimeout和ready两种方法。但我不确定ready等待多久。我试图查看它的文档，但无法清楚地找到答案。

如何解决这个特定的情况？

- Shades88

---

这个 div 是通过 ajax 加载的吗？我不明白为什么你不直接使用 jQuery 的 document.ready 来处理这个问题。 - kinakuta

"$(document).ready(function () {});" 可以在所有页面控件创建完成后开始执行。但如果你要谈论浏览器渲染，那就是另一回事了。 - Kemal Can Kara

@kinakuta - 我不能使用document.ready()，因为我想要在IT加载完成后立即显示bigDiv。我不能等待整个页面加载完成，因为这可能需要太长时间。 - Shades88

Answer 1

最简单的方法是在元素的结束标签后立即运行您的代码。 像这样：

<div id='bigDiv>....</div>
<script>
// do whatever you want to do with div
</script>

提示：或者您可以在一定时间间隔后尝试访问 div 后面的任何元素。如果存在 - 您的 div 已经准备好了。

- Cheery

---

我本来也想说同样的话，并补充一句，如果$('#bigDiv')已经返回了一个非空集合，那么你不太可能需要等待ready()。你需要ready()的唯一时机是确保$('#bigDiv')成功，最好重新排列页面，使脚本位于元素下方（或者理想情况下位于</body>标签下方）。 - Jason

这个解决方案目前不适用于我的问题范围。无论我对bigDiv要做什么，都需要包含在我附加的js文件中。因此，会发生两件事情，它们可能异步发生。1. 加载bigDiv数据 2. 加载处理big div数据的js。现在，我包含的这个js不仅与bigDiv有关，还有其他功能。我已经澄清了这一点，因为你可能会怀疑我为什么要单独放置js。 - Shades88

@Shades88，你的问题并不是很清楚。在浏览器获取到div的结束标签之前，jQuery会返回空选择，因为该元素不在DOM结构中。所以你需要定期检查所需元素的可用性，即使没有ready函数也可以实现。 - Cheery

@Cheery，那么bigDiv对象在完全加载之前将不包含任何内容？ - Shades88

@Shades88 脑海中唯一的想法是检查内部内容的长度，假设在检查期间至少传输一个字节。类似这样（您还可以在文档准备就绪时清除间隔）。 var timer = setInterval(function(){ $('#bigDiv').each(function(){ if ($(this).html().length>len) len = $(this).html().length; else { clearInterval(timer); alert('Ready');
} }); }, 500), len = 0; - Cheery

Answer 2

这取决于客户端的网络速度，bigDiv中的内容大小以及客户端计算机的速度。

- kleinohad

---

这是什么意思？我知道客户端的网络速度可能很慢，这就是我提出这个问题的原因。 - Shades88

Answer 3

尝试在脚本标签的第一行添加。

var d = new Date();  console.log(d.getTime());

在 jQuery ready 函数后面添加相同的内容并查看。

将此时间与页面加载时间进行比较。

你会发现，最后一张图片加载完毕后，它会立即运行下一个毫秒。

- mikul

---

这意味着，如果我的内容从未加载，我的页面将挂起，因为 ready 会不断地检查它吗？ - Shades88

如果您的内容从未加载，则甚至您的jQuery也无法加载。 我没有看到过我的内容没有加载，而我的CSS和JavaScript文件已加载。 - mikul

不不，我的js是单独加载的，div内容也是分开加载的。并不是说如果div内容没有加载成功，那么我的js和css就没有加载成功。 - Shades88