javascript - 如果单击按钮，jQuery 会阻止重新加载

Question

我有一个 jQuery 数据表，可以立即加载就绪。之后，数据表每 30 秒重新加载一次。此功能正常运行。

我添加了一个搜索功能，可以使用新的搜索结果自动重新加载数据表。该部分也正常运行。

我遇到的问题是当我使用搜索功能时，返回了新的搜索结果。 30 秒后，新结果被清除，数据表重新加载所有原始记录。

这是我目前正在尝试的:

$(document).ready(function()
{
  var searchCriteria = "";
  displayBookings(searchCriteria);

  var idle = 0;
  var idleInterval = setInterval(timer, 30000);
  $(this).mousemove(function(e){idle = 0;});
  $(this).keypress(function(e){idle = 0;});
  function timer()
  {
    idle = idle + 1;
    if(idle > 2)
    {
      displayBookings(searchCriteria);
      console.log('table reloaded');  
    }
  }

  $('#searchPending').on('click', function()
  {
    var isPending = 'Y';
    var searchCriteria = {
      isPending: isPending
    };
    displayBookings(searchCriteria);
  });
});

函数 displayBookings() 采用 searchCriteria。如果 searchCriteria 为空，则会触发基本查询。显然是 searchCriteria 包含参数，然后触发相同的查询并附加 WHERE 子句。我没有透露 displayBookings() 的代码。

如果单击 #searchPending 按钮，我需要做的就是停止 30 秒间隔。

Answer 1

清除间隔以停止加载。

clearInterval(idleInterval)

特别是在您的代码中:

$('#searchPending').on('click', function()
  {
    clearInterval(idleInterval)
    var isPending = 'Y';
    var searchCriteria = {
      isPending: isPending
    };
    displayBookings(searchCriteria);
  });