Question

我尝试了几个小时才能使以下代码正常工作。代码应暂停，直到加载页面。我遇到的问题是AJAX是异步执行的。如何强制代码在执行之前等待？

var i = 1;
function On_Success(){

    i = i+1;
    if(i<=10){

    $('<div id="p'+i+'">b</div>').replaceAll('#b'); 
    $('#p'+i).load('tabelle.html');
    //here shoul be waited, til the page is loaded
    On_Success();
    };
    };

    function knopf(){
    $('body').append('<div id="p'+i+'">a</div>');
    $('#p'+i).load('tabelle.html'); 
    On_Success();
    };

Answer 1

Ajax和load都有一个on successs函数，可以在完全返回响应时运行。

$.ajax({
        async: true,
        type: "GET",
        url: url,
        data: params,
        success: function(html){
                 //do stuff here
                 },
        error: handleAjaxErrors

    });

如果你想使用load，那么也有成功的回调：

$("#myDiv").load('/ajax/data/get', function() {
  //do stuff here
});

Answer 2

load函数有一个成功处理程序：

$('#p'+i).load('tabelle.html', function() {
  On_Success();
});

成功处理程序仅在ajax调用成功完成后，以及在将提供的内容添加到DOM之后调用。

您可以在此处查看完整文档：

http://api.jquery.com/load/

如果您还想捕获客户端上的错误情况，则需要根据@Chris的回答使用完整的$.ajax调用。

Answer 3

.load接受在加载完成时运行的回调;您可以使用此函数代替更详细的jQuery.ajax函数，这将要求您编写其他代码来填充元素。

jQuery("#p", i).load("tabelle.html", function() {   
   //code to run when tabelle.html has finished loading
});

将您的代码更改为以下内容。它应该工作：

var i = 1;

function On_Success() {

    i = i + 1;
    if (i <= 10) {
        $('<div id="p' + i + '">b</div>').replaceAll('#b');
        $('#p' + i).load('tabelle.html', On_Success);        
    };
};

function knopf() {
    $('body').append('<div id="p' + i + '">a</div>');
    $('#p' + i).load('tabelle.html', On_Success);
};

另一方面，在填充其他div之前，是否应该等待一个加载完成？为什么你不能这样做：

function On_Success() {
    var i = 0;
    while(i < 11) {
        $('<div id="p' + i + '">b</div>').replaceAll('#b');
        $('#p' + i).load('tabelle.html');        
    };
};

另外，我不确定knopf函数在做什么。 i的价值应该是什么？你怎么称呼你的代码？

使用JavaScript完全加载页面后执行代码

3 个答案: