Выполнить код после полной загрузки страницы с использованием JavaScript

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

Функция загрузки имеет обработчик успеха:

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

Обработчик успеха вызывается только после успешного завершения вызова ajax и после добавления предоставленного содержимого в DOM.

Вы можете увидеть полную документацию здесь:

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

Если вы также хотите зафиксировать условия ошибки на клиенте, вам потребуется использовать полный вызов $.ajax согласно ответу @ Chris.

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 в этой функции? Как вы называете свой код?