간격을 사용하여 다시 함수를 다시로드 할 때까지 ajax 함수가 완료 될 때까지 대기합니다.

Question

데이터를 가져 와서 1 초마다 HTML에 추가하는 AJAX 함수가 있습니다. 가져올 데이터가 많기 때문에 AJAX를 사용하는 이유가 있습니다. 그래서 나는 한계 (100 데이터 당 한도)를 가져올 필요가있다, 그래서 간격을 사용하여 AJAX 함수를 새로 고침, 문제는 데이터가 항상 동일하기 때문에, 기능이 완료되기 전에, 간격 새로 고침 다시이 기능을 해결할 방법이 있습니까?

JQuery와 AJAX 코드 :

var ctr = 0; 
var pct = 0; 
var total = 0; 
var bnprd = "<?php echo $bonperiod;?>"; 
var bnsrt = "<?php echo $bonsort;?>"; 
var mybonperiod = "<?php echo $mybonperiod;?>"; 
var sc = '000'; 
var interval; 

window.onload = function() { 
{getDataNoBreak();} 
}; 

interval = window.setInterval(function() {getDataNoBreak()}, 0);} //set the interval 

function getDataNoBreak() { 
     jQuery(document).ready(function() { 
      jQuery.ajax({ 
       url: "{{ url('panel/bonus/payviasc/getDataNoBreak') }}", 
       type: 'POST', 
       data: {_token :'{{ csrf_token() }}',counter : ctr, bonperiod: bnprd, bonsort: bnsrt}, 
       dataType: "json", 
       success: function(data) { 
        if(ctr==0){ total = data[0].total;} 
        for(var i =0; i < data.length; i++) { 
         if(data[i].loccd) sc = data[i].loccd; 
         else sc = '000'; 
         var htm = ''; 
         htm += '<tr>'; 
         htm += '<td data-label="MEMBER">'+ data[i].dfno +' &nbsp;</td>'; 
         htm += '<td data-label="MEMBER NAME">'+ data[i].fullnm +' &nbsp;</td>'; 
         htm += '<td data-label="SC">'+ sc +' &nbsp;</td>'; 
         htm += '<td data-label="PERIOD">'+ mybonperiod +' &nbsp;</td>'; 
         htm += '<td data-label="GRADE">'+ data[i].level +' &nbsp;</td>'; 
         htm += '<td data-label="BONUS">'+ data[i].totbns +' &nbsp;</td>'; 
         htm += '<td data-label="SIGNATURE"> &nbsp;</td>'; 
         htm += '</tr>'; 
         $("#isi").append(htm); 
         pct += 1; 
         var totalPct = (pct/total)*100; 
         $("#progress".html('<div class="progress-bar progress-bar-striped active" style="width:' + totalPct + '%"></div>')); 
         $("#message").html('Loading data...'); 
         if (totalPct == 100) { 
         completed(); 
         } 
        } 
        if(ctr < total-1) ctr+=101; 
       } 
       , 
       error: function(data) { 
       } 
      }); 
     }); 
    } 

function completed() { //when the interval is finish 
    $("#message").html("Completed"); 
    if(pageBreak == 0){ 
     $('#payviabank').DataTable({ 
     "paging": true, 
     "lengthChange": false, 
     "searching": true, 
     "ordering": false, 
     "info": true, 
     "autoWidth": false 
     }); 
    } 
    window.clearInterval(interval); 
} 

Answer 1

그래서 처음에는 간격이 0 초마다 실행되도록 설정되어 있고, 아마도 작동하지 않을 것입니다. 그러나, 당신이 원한다고 생각하는 것은 성공 또는 완료에 대한 또 다른 전화를하는 것입니다. 그냥 간단합니다 :

물론

function makeRequest(payload){ 
    var options = { 
     url : '/path/to/file.php', 
     type : 'POST', 
     data : payload, 
     success : function(res){ 
      //do something with the (res)ponse, maybe make new payload 
      makeRequest(newpayload); //make the call again 
     } 
    } 
    $.ajax(options); 
} 

, 당신이 할 순서대로 makeRequest 기능에 추가 매개 변수를 전달해야 할 수 있습니다 당신이 동일한 데이터를 다시하지 않습니다.

Answer 2

는 간격 대신 제한 시간을 설정합니다.

아약스의 "성공"기능에서 다시 실행하려면 다른 시간 초과를 설정하십시오. 그렇게하면 이전의 Ajax 요청이 완료 될 때까지 다시 새로 고치려고하지 않을 것임을 보장 할 수 있습니다.