停止循环 AJAX 查询 - Stop looping AJAX query

Stop looping AJAX query

本文关键字：查询 AJAX 循环 | 更新日期: 2023-09-27

使用 jQuery 和 AJAX，我创建了一个每秒循环刷新控制台的脚本。

页面设置如下： index.php -> console.php -> consoleQuery.php

其中index.php是主页，其中包含可以触发多个 AJAX 脚本并将index.php正文替换为返回的内容的按钮。正在console.php的脚本之一和console.php的一部分包括以下脚本。

window.setInterval(function() {
    $.ajax({
        type: "POST",
        url: "ajax/consoleQuery.php",
        data: "",
        success: function(response) {
            $("#consoleBody").html(response);
        }
    });
    console.log("Console refreshed");
}, 1000);

此脚本调用consoleQuery.php基本上更新页面的正文并每秒刷新一次。

然而，问题是，在单击另一个父级页面时index.php
(例如index.php -> home.php(导致循环的JS在home.php替换index.php正文时仍然出现在后台。最重要的是，再次触发console.php会导致它每秒刷新控制台两次，如果多次单击，则以此类推。本质上，循环在多个实例中运行。

我想尝试做的是在触发一个不请求console.php的 AJAX 请求时，停止刷新页面正文的循环脚本。

访问其他页面时有什么方法可以停止循环吗？提前感谢！

如果您获取计时器 ID：

var consoleRefreshTimer = window.setInterval...

然后你可以用以下命令停止它：

clearInterval(consoleRefreshTimer);

您可能希望在每个子页面 AJAX 请求时清除它，并在呈现需要它的子页面后启动它。更好的是，让子页面定义setup和teardown函数，在显示setup后立即调用它，在开始对新函数的 AJAX 请求之前调用teardown。或者为每个页面创建一个对象，将此功能包装在主页中。快速和肮脏的例子：

var subpages = {
  main: {
    url: "http://example.com/main",
  },
  console: {
    url: "http://example.com/console",
    setup: function() {
      this.timer = setInterval(function() { console.log("consoled!"); }, 1000);
    },
    teardown: function() {
      clearInterval(this.timer);
    }
  }
};
var getSubpage = (function() {
  var currentSubpage = {};
  return function(key) {
    var subpage = subpages[key];
    if (currentSubpage.teardown) currentSubpage.teardown();
    console.log("loading " + key + " (actually faking it with timers)");
    setTimeout(function() {
      currentSubpage = subpage;
      console.log("showing " + key);
      if (currentSubpage.setup) currentSubpage.setup();
    }, 500);
  };
})();
getSubpage('main'); // main is loaded
getSubpage('console'); // console is loaded; console timer starts up
getSubpage('main'); // main is loaded; console timer stops