Question

使用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）当home.php替换index.php的主体时，导致循环的JS仍然在后台发生。除此之外，再次触发console.php会导致它每秒刷新控制台两次，如果多次单击则依此类推。本质上，循环在多个实例中运行。

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

访问其他页面时有没有办法停止循环？提前谢谢！

Answer 1

如果您获取计时器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

停止循环AJAX查询

1 个答案: