javascript - 等待 ajax 函数完成，直到使用间隔再次重新加载该函数

Question

我有一个 AJAX 函数，每 1 秒从 中获取数据并将其附加到 HTML，我使用 AJAX 的原因是因为我有很多数据要从数据库中获取，所以我需要以限制(100 data per-limit)，所以我使用间隔刷新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 函数传递额外的参数，以确保您不会再次获得相同的数据。