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

execute js function when a function inside document.ready is done

本文关键字：函数 完成时 js 执行 document ready      更新时间：2023-09-26

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

此中心部分页面使用 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);

但我不能让它运行.任何建议将不胜感激。提前感谢！

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 :(");
    });
});

这里有一种同时处理 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/

相关文章：