Ajax-запрос внутри цикла зависает браузером? - PullRequest
Новая
       8

Ajax-запрос внутри цикла зависает браузером?

0 голосов
/ 11 февраля 2019

Я хочу получить результат от сервера, который имеет огромные объемы данных.поэтому сервер отправляет данные на нескольких страницах.так что я хочу, чтобы все они показывались в Datatable.поэтому я использую запрос ajax внутри цикла, потому что я хочу получить со многих страниц.Я добавляю +1 для переменной страницы, чтобы цикл получал все результаты со всех страниц до тех пор, пока количество элементов ответа не станет равно 0. Но проблема в том, что браузер зависает при выполнении этого запроса?Есть ли другой способ добиться этого?Благодарю.

Я пытался сначала получить данные, а затем добавить их в таблицу после цикла, но браузер по-прежнему зависал.

$('#corporateComboOfAllCorpTag').change(function () {
let response=1;
let page=0;
$('#tableOfAllCorpTag').DataTable().destroy();
let corpParkStationTable=$('#tableOfAllCorpTag').DataTable({order:[]});
corpParkStationTable.clear();
let corpStations=[];

while (response!=0){

    $.ajax({
        url:corporateTagUrl+corporates[$('#corporateComboOfAllCorpTag').prop('selectedIndex')].corporateId,
        method:"GET",

        data:{
            "size":1000,
            "page":page
        },

        dataType:"json",
        headers: { 'smart-session-key': sessionKey, 'userName': admin},
        async:true,


        success:function (resp) {

            for (let i = 0; i < resp.content.length; i++) {

                corpParkStationTable.row.add($(
                    '<tr><td>'+resp.content[i].tagSerial+'</td><td>'+resp.content[i].tagUid+'</td><td>'+resp.content[i].status+'</td><td>'+resp.content[i].addedBy+'</td><td>'+resp.content[i].addedDate+'</td><td><button class="btn btn-info">More</button></td></tr>'
                )).draw(false);

                corpStations.push(resp.content[i]);
            }

            response=resp.numberOfElements;

        },

        error:function (resp) {
            console.log("Fail "+resp);
        }

    });
    page++;
  }
});

1 Ответ

0 голосов
/ 11 февраля 2019

Если вы установите async: false, то это будет работать, но некоторые браузеры будут выдавать предупреждения.

Я думаю, что вы должны писать свой код синхронно.Например 

function getDataFromAjax(){
    $('#corporateComboOfAllCorpTag').change(function () {
    $('#tableOfAllCorpTag').DataTable().destroy();
    let corpParkStationTable=$('#tableOfAllCorpTag').DataTable({order:[]});
    corpParkStationTable.clear();
    let corpStations=[];
    function getPagewiseData(pageNum){
     $.ajax({
            url:corporateTagUrl + corporates[$('#corporateComboOfAllCorpTag').prop('selectedIndex')].corporateId,
            method:"GET",
            data:{
                size:1000,
                page:pageNum
            },

            dataType:"json",
            headers: { 'smart-session-key': sessionKey, 'userName': admin},
            async:true,
            success:function (resp) {

                for (let i = 0; i < resp.content.length; i++) {

                    corpParkStationTable.row.add($(
                        '<tr><td>'+resp.content[i].tagSerial+'</td><td>'+resp.content[i].tagUid+'</td><td>'+resp.content[i].status+'</td><td>'+resp.content[i].addedBy+'</td><td>'+resp.content[i].addedDate+'</td><td><button class="btn btn-info">More</button></td></tr>'
                    )).draw(false);

                    corpStations.push(resp.content[i]);
                }

                response=resp.numberOfElements;
                if(resp.numberOfElements>0){
                    getPagewiseData(pageNum+1)
                }

            },

            error:function (resp) {
                console.log("Fail "+resp);
            }

        });
    }
    getPageWiseData(0);
}
getDataFromAjax();
...