doulou1989 2014-12-03 03:19
浏览 34
已采纳

停止循环AJAX查询

Using jQuery and AJAX, I've created a script that loops every second to refresh a console.

The page is setup like so: index.php -> console.php -> consoleQuery.php

Where index.php is the main page, with buttons that can trigger multiple AJAX scripts and replace the body of index.php with the returned contents. One of the scripts being console.php and part of console.php includes the following script.

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

This script calls upon consoleQuery.php to essentially update the body of the page and refresh it every second.

The problme is however, upon clicking another page thats parented to index.php
(for example index.php -> home.php) the JS that is causing the loop still occurs in the background when home.php replaces the body of index.php. On top of this, triggering console.php again causes it to then refresh the console twice per second and so on if its clicked multiple times. Essentially the loop is running in multiple instances.

What I want to try and do is upon triggering one of the AJAX requests that doesn't request console.php, stop the looping script that is refreshing the body of the page.

Is there any way to stop the loop when accessing a different page? Thanks in advance!

  • 写回答

1条回答 默认 最新

  • douweng3564 2014-12-03 03:25
    关注

    If you grab the timer ID:

    var consoleRefreshTimer = window.setInterval...
    

    then you can stop it with:

    clearInterval(consoleRefreshTimer);
    

    You probably want to clear it at every subpage AJAX request, and start it once you render the subpage that needs it. Even better, have subpages define setup and teardown functions, call setup just after you display it, call teardown just before you start the AJAX request for a new one. Or make an object for each page that will wrap this functionality in the main page. Quick and dirty example:

    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
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 MATLAB yalmip 可转移负荷的简单建模出错,如何解决?
  • ¥15 数学的三元一次方程求解
  • ¥20 iqoo11 如何下载安装工程模式
  • ¥15 本题的答案是不是有问题
  • ¥15 关于#r语言#的问题:(svydesign)为什么在一个大的数据集中抽取了一个小数据集
  • ¥15 C++使用Gunplot
  • ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?