Question

我有一个AJAX函数来从中获取数据并每隔1秒将其附加到HTML，我使用AJAX的原因是因为我有很多数据要从数据库中获取所以我需要用限制来获取它（100数据每限制），所以我用间隔刷新AJAX函数，问题是显示的数据总是一样的，因为在函数完成之前，间隔再次刷新函数，有没有办法解决这个问题？ / p>

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

设置超时而不是间隔。

然后，在ajax的“success”功能中，设置另一个超时以再次运行它。这样你就可以保证在前一个ajax请求完成之前它不会再次尝试刷新。

Answer 2

所以首先你的间隔设置为每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函数，以确保您不会再次获得相同的数据。

等待ajax函数完成，直到使用interval重新加载函数

2 个答案: