Question

我们有一个JavaScript / JQuery页面，其中包含许多“初始化函数”a la：

$(function(){
  //Do stuff
}

是否有一种编程方式可以确定所有这些方法何时完成运行？

我们可以在最后一个函数（）中将布尔变量设置为true ...想知道是否有更优雅的方式。

...

Answer 1

如果您只是需要确定它们是否已经运行，请使用$.isReady，当DOM准备就绪时它将是真的，直到执行所有处理程序之前它才会设置...所以漂亮 - 很多单线程会让你在那里工作。

如果要对要执行的内容进行排队（必须在 document.ready触发之前将其排队），请将其绑定到"ready"，如下所示：

$(document).bind("ready", function() { alert("All ready functions ran"); });

You can see how it's fired here，请注意，此不与$(document).ready()，which is another function相同。

Answer 2

假设你的所有初始化“东西”是同步的，你可以在页面的最后一个函数的末尾调用一个函数，在这个函数中你可以执行代码，知道所有东西都已经初始化了。

$(function(){
  //Do stuff

  run();
}

function run() {
  // we are initialised now...
}

虽然这并不是您要求的，但它不需要检查初始化函数是否已经完成运行......只要它们调用run函数就会被调用。

Answer 3

尝试this (example)：

HTML：

<div id="test"></div>

JS：

(function ($) {

    var 
        owReady = $.ready,
        readyEndList = [];

    $.ready = function () {

        var 
            toEnd = owReady(),
            fn, i = 0;

        if (toEnd)
            return toEnd;

        if (!$.isReady)
            return toEnd; 

        while ( (fn = readyEndList[ i++ ]) ) {
            fn.call( document, jQuery );
        }

        readyEndList = null;

        return toEnd;

    };

    $.addToEndReady = function(fn) {

        if ($.isFunction(fn))
            readyEndList.push(fn);
    };

    $(function (ev) {

        $('#test').append('<span>0</span><br />');

        $.addToEndReady(function(){

            $('#test').append('<span>end</span><br />');

        });

    });

    // inicio del modulo
    $(function (ev) {

        $('#test').append('<span>1</span><br />');

    });

    $(function (ev) {

        $('#test').append('<span>2</span><br />');

    });

} (jQuery));

确定所有init函数何时完成？

3 个答案: