Javascript 如果单击按钮，jQuery将阻止重新加载

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

我添加了一个搜索功能，可以自动用新的搜索结果重新加载datatable。这部分功能也正常

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

以下是我目前正在尝试的：

$(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为空，则会触发基本查询。显然，is searchCriteria包含参数，然后使用附加的WHERE子句触发相同的查询。我没有透露

displayBookings（）

的代码

---

如果单击了

#searchPending

按钮，我需要做的就是停止30秒的间隔。

清除间隔，这样它将停止加载

clearInterval(idleInterval)

特别是在您的代码中：

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

---

您可以使用最新的搜索条件刷新“刷新”（您的“计时器”功能），而不是启动和停止计时器间隔，因为您会遇到一些竞争条件。为此，只需将相同的对象传递到

displayBookings

函数中即可。例如

const search = { criteria: "" };
$(...).click(() => {
    search.criteria = 'change it...';
    displayBookings(search.criteria);
});

setInterval(() => displayBookings(search.criteria), 30000);

这样，如果发生刷新，它将使用最新的

搜索条件。只需从第二个
searchCriteria
中删除
var
，即可实现相同的结果，只需对代码进行最小的更改。目前，在不删除
var
的情况下，您的外部标准由您的内部标准执行

我在一篇评论中提到。我误读了代码，去Bouncing不是你想要的。相反，如果在某个阈值内没有任何用户活动，则只希望“刷新”。以下是您使用的方法的替代方案：

let lastInteraction = 0;

function interact() {
    lastInteraction = Date.now();
}

$(this).mousemove(interact);
$(this).keypress(interact);

然后在刷新功能中：

if (Date.now() - lastInteraction > threshold) { ...

执行中央标准和修订的怠速检查：

$(document).ready(function() {

  const idle = {
    threshold: 1000,
    lastInteraction: 0,
    interact() {
      idle.lastInteraction = Date.now();
    },
    isIdle() {
      return Date.now() - idle.lastInteraction > idle.threshold;
    }
  };

  const search = { criteria: "" };

  $(this).mousemove(idle.interact);
  $(this).keypress(idle.interact);

  setInterval(() => {
    if (idle.isIdle()) {
      displayBookings(search.criteria);
    }
  }, 30000);

  $('#searchPending').on('click', () => {
    search.criteria = { isPending: 'Y' };
    displayBookings(search.criteria);
  });

  displayBookings(search.criteria);
});


维基百科的文章链接到讨论了用键盘去抖动。这是相同的概念。如果您计划在用户键入时让displayBookings函数实时执行，则可以在displayBookings函数上使用去Bouncing。这将防止在短时间内发生太多HTTP请求。
我将把它放在哪里？在按钮里面点击？@JohnBeasley是的，我只是编辑了一下来显示。当点击按钮时，它将清除间隔并停止刷新加载。这似乎就是我要寻找的。我甚至不知道clearInterval特性。谢谢，先生。除了CodeAt30的答案之外，为什么不简单地修改单击处理程序中的
searchCriteria
，而不是声明一个新变量呢？使一些“全局”状态对象保存搜索条件。顺便说一句：您使用计时器所做的操作称为
去抖动
。请您举一个您所指的例子好吗？我确实已经记下了这个问题的答案，但是我很想知道你们在说什么。另外，去Bouncing是好事还是坏事？我用一个“状态”给出了一个答案。我最初误读了你的代码。如果你好奇的话，尽管我在我的回答中提供了一个关于这一点的注释，但你并没有去Bouncing。