实现递归ajax调用并在一个条件下停止它

时间:2014-08-01 10:27:20

标签: javascript jquery ajax

一直在寻找和尝试几个小时,但作为ajax的新手,我一直未能得到我想要的东西。这是事情: 1.我有一个从db获取当前日期数据的页面,所以我用一些setTimeOut()的{​​{1}}递归调用ajax函数来显示更新的db recrods。 我在这里失败了。我有日期选择器,所以一旦用户从jquery选择器中选择过去的日期,我应该停止当前的ajax进程并获取该特定日期的数据,并且我不希望它以递归方式调用,因为过去的数据永远不会被更改。

递归代码

10 seconds

第一次调用function makeCall(selectedDate) { $(document).ready(function() { $("#divtable").hide(); $.get('getdataservlet',{ 'selectedDate': selectedDate },function(responseJson) { if (responseJson!=null) { $("#datatable").find("tr:gt(0)").remove(); var table1 = $("#datatable"); $.each(responseJson, function(key,value) { var rowNew = $("<tr><td></td><td></td><td></td><td></td><td></td></tr>"); rowNew.children().eq(0).text(value['first']); rowNew.children().eq(1).text(value['two']); rowNew.children().eq(2).text(value['three']); rowNew.children().eq(3).text(value['four']); rowNew.children().eq(4).text(value['five']); rowNew.appendTo(table1); }); } setTimeout(makeCall, 10000,selectedDate); }); $("#divtable").show(); }); } makeCall(currentDate()); 并且每10秒继续递归makeCall(currentDate())

Jquery日历代码

setTimeout()

有人可以帮我这个吗?抱歉,尽管多次尝试,我仍然无法正确格式化问题中的代码。

2 个答案:

答案 0 :(得分:1)

只需创建一个布尔标志即可指示当前日期是否已选中:

var someFlag = true,
    timeout = null;
function makeCall(selectedDate) {
  if (someFlag == true) {
    $("#divtable").hide();
    $.get('getdataservlet',{ 'selectedDate': selectedDate },function(responseJson) {
      if ((!isCurrentDate(selected) || someFlag == true) && responseJson!=null) {
        $("#datatable").find("tr:gt(0)").remove();
        var table1 = $("#datatable");
        $.each(responseJson, function(key,value) { 
          var rowNew = $("<tr><td></td><td></td><td></td><td></td><td></td></tr>");
          rowNew.children().eq(0).text(value['first']); 
          rowNew.children().eq(1).text(value['two']); 
          rowNew.children().eq(2).text(value['three']); 
          rowNew.children().eq(3).text(value['four']); 
          rowNew.children().eq(4).text(value['five']); 
          rowNew.appendTo(table1);
        });
      }
      timeout = setTimeout(makeCall, 10000, selectedDate);
    });
    $("#divtable").show();
  }
}

$(document).ready(function() {
  makeCall(currentDate());
});

还实现函数isCurrentDate,如果提供的日期是currentDate,则返回布尔值。

$(function() {
  $("#dateinput").datepicker({
    onSelect: function(date) {
       clearTimeout(timeout);
       if (isCurrentDate(date)) {
           someFlag = true;
           makeCall(date);
       } else {
           someFlag = false;
       }
    },
    showOn: "button",
    buttonImage: "cal.gif",
    buttonImageOnly: true,
    dateFormat: "yy-mm-dd"
  });
});

答案 1 :(得分:1)

如果所选日期小于今天的日期,您需要在计时器上调用clearTimeout

var timer;
function makeCall(selectedDate) {
  $.get(...
  ....
  if (selectedDate < new Date() && timer) {
    // If a timer is already running and the selected date is less than today, stop it
    clearTimeout(timer);  
  } else {
    // Start a timer
    timer = setTimeout(makeCall, 10000, selectedDate);
  }

并在document.ready中调用此函数,并在选择新日期时调用

简单fiddle来演示用法(在文本框中输入一个数字来停止循环)