Question

我有一个计算每台服务器性能的网站。其中一个要求是关于性能的中心部分页面必须先完成加载才能在后台执行另一个功能。

此中心部分页面使用ajax调用。它们是在js文件的document.ready中定义的：

$(document).ready(function () {
// ajax call here
// another ajax call here
// third ajax call here
});

然后我想在文档准备好的函数完成后执行的函数：

function functionA() {
// some codes here
});

我试过用这个：

$.when(document).ready(function () {
}).done(functionA);

但是我无法让它运行..任何建议都会很高兴。提前谢谢！

Answer 1

AJAX中的第一个字母代表异步，这意味着在document.ready事件结束时，它们可能会在其他地方进行某些处理。 document.ready不会等待他们完成。

您需要使用.when设置jQuery，以告诉您何时完成所有三个AJAX调用：

// Document.ready
$(function() {
    // Any synchronous code you may do on DOM ready goes here

    // Set up the promise
    $.when(
        // Pass in all your AJAX calls.
        $.ajax({ url: "/AjaxCall1?param=true" }),
        $.ajax({ url: "/AjaxCall2?param=1" }),
        $.ajax({ url: "/AjaxCall3?param=yup" })
    ).then(function() {
        console.log("All AJAX requests finished");
    }, function() {
        console.log("Something went wrong :(");
    });
});

Answer 2

这是一种同时处理DOM就绪事件和Ajax调用的方法：

var init, ajax1, ajax2, domready;
ajax1 = $.ajax({ url: '/1' });
ajax2 = $.ajax({ url: '/2' });
domready = $.Deferred();
$(domready.resolve);
init = $.when(domready, ajax1, ajax2);

http://api.jquery.com/category/deferred-object/

然后您不再需要关心上面的代码：

init.done(function () { alert('success'); });
init.fail(function () { alert('failure'); });
init.done(function ($, response1, response2) { 
    alert(response2[0]); // shows the data from the second Ajax call
});

这是一个现场演示：http://jsfiddle.net/wared/s22dT/。

关于您的尝试，jQuery.when()会返回一个没有ready方法的Promise对象：

$.when().ready() // TypeError: Object #<Object> has no method 'ready'

http://api.jquery.com/jQuery.when/

当document.ready中的函数完成时执行js函数

2 个答案: