Question

我有一个jQuery数据表，可立即加载ON READY。之后，数据表每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);
  });

Answer 2

不是启动和停止计时器间隔，因为你会遇到一些竞争条件，你可以进行＆＃34;刷新＆＃34; （您的＆＃34;计时器＆＃34;功能）使用最新搜索条件进行刷新。为此，只需将同一个对象传递到displayBookings函数即可。 E.g。

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

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

这样，如果发生刷新，它将使用最新的search.criteria。只需从第二个var中删除searchCriteria，即可在代码变化最小的情况下获得相同的结果。目前，在不删除var的情况下，您的内部标准为"shadowed"。

我在其中一条评论中提到debouncing¹。我误读了代码并且去抖动不你想要什么。相反，你只想＆＃34;刷新＆＃34;如果在某个阈值内没有任何用户活动。这是您使用的方法的替代方案：

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功能上使用debouncing。这样可以防止在很短的时间内发生太多的HTTP请求。

如果点击按钮，jQuery会阻止重新加载

2 个答案: