javascript - 在这种情况下使用window.setTimeout()和window.setInterval()

Question

这可能是一个新问题，但是....
最近，我一直在使用window.setTimeout对父函数进行递归调用，对父函数进行ajax轮询。

function connectToVM(portal) {
    //making the ajax call here....
   if(response.responseText !== "")
     {
    windowInterval = window.setTimeout(function() {
        connectToVM(portal)
    }
    , 4000);
   }
  }

windowInterval是我的全局变量。

if(!checkIfChartExists()) {
  window.clearInterval(windowInterval);
}

现在，我知道我可以简单地将 function传递给 clearTimeout，而不是在这里使用变量，但是这也会导致所有其他间隔都停止:(

我这样做的原因是服务器仅在有响应时才会超时。
我的情况是，我有一个图表，每个超时间隔都会更新。
AFAIK，当我们设置间隔时，会为变量设置一个特定的值（如果设置为变量）。因此，当我打印变量时（每次调用超时函数时），我都会得到一些唯一的int值。

我有很多选项卡，很多选项卡可以具有相同的图表..这只是利用了之前触发的相同间隔。
现在我只有1个图表。但是我有很多图表可以显示相同类型的图表。说出仪表图。

每当当前选中的选项卡中没有图表时，我还必须清除超时-我正在这样做。
因此，我计划只制作一个函数，该函数通过将所需的参数传递给该函数来对服务器进行调用。

但是为了进行轮询，我使用了上面提到的window.setTimeout东西。
这适用于1个图表。
现在，我尝试再添加1个图表，使用不同的参数集来轮询服务器，我将需要使用一些不同的setTimeout函数，该函数的ID与之前触发的超时的ID不同。

我还必须考虑，如果第一个图表已经存在，则超时已经触发并必须保持其运行。
因此，现在我必须触发第二次超时。
但是这里没有 second timeout。

我想知道是否有其他替代方法，因为我无法真正预测运行时将有多少个图表。

Question 1 : Can we flood our browser with many timeout's?

Question 2 : How to get the id of that particular timeout, so that I can clearTimeout(id) on it?

Question 3 : Since we can't assign / make variables on the fly, how to set / make such a data structure which can hold such a pointer to the particular chart's index / id.. so that we can easily get hold of it and clear it.

Question 4 : Is this the only way we can poll the server(via AJAX) if we have to poll continually?

最后，我意识到这是我在此处发布的一个非常 complex问题。但是我相信我将从论坛上找到一些有用的信息。
我没有在JS中完成所有这些工作的经验，但是可以提供任何帮助！



更新资料

抱歉，我必须在这里发布代码。但是我正在使用Extjs来获取图表portlet。我的函数 connectToVM代码是这样的：

function connectToVM(portalId, host, port, user, passwd, db) {
      try{
        if(Ext.getCmp(portalId)) 
        {
            var gaugeChartForTitle = Ext.getCmp(portalId);

            if(typeof portalOriginalTitle === 'undefined')
                portalOriginalTitle = gaugeChartForTitle.title;

            var gaugeChartDiv = document.getElementById(portalId);

            Ext.Ajax.request({
                      url: "/connectToVM?" +
                            Ext.urlEncode({
                                host: host,
                                port: port,
                                user: user,
                                passwd: passwd,
                                db: db
                            }),
                      method: 'GET',
                      success: function (response, options) {

                          if(response.responseText !== "")
                          {
                              gaugeChartDiv.style.background = "";

                              gaugeChartForTitle.setTitle(portalOriginalTitle);

                              console.log("Virtual Machine at "+ host +" :  BUSY % : "+response.responseText);

                              virtualMachineStore.loadData(generateVirtualMachineData(response.responseText)); //Setting the data1 value of the store and loading it for display!

                              windowInterval = window.setTimeout(function() {
                                  connectToVM(portalId, host, port, user, passwd, db)
                                }
                              , 4000);
                          } 
                          else 
                          {
                              windowInterval = window.setTimeout(function() {
                                  connectToVM(portalId, host, port, user, passwd, db)
                                }
                              , 10000); //Retry every 10 seconds to check if the connection is established!

                              gaugeChartDiv.style.background = "red";
                              gaugeChartForTitle.setTitle(portalOriginalTitle +" - Connection Failure. Reconnecting!");
                          }
                      },
                      failure: function ( result, request) { 
                     }
              });
         }
             }
             catch(err) {
             }
         }

现在，我使用以下命令触发函数：

function setWindowIntervalForVM(portalId) {
       //console.log("isIntervalActivated inside setWindowIntervalForVM() : "+isIntervalActivated);
       if(!isIntervalActivated) {
           connectToVM(portalId, host, port, user, pwd, db);
       }
    }

   function checkIfWindowIntervalIsActivated(portal) {
       if(!isIntervalActivated) {
            setWindowIntervalForVM(portal.id);
            isIntervalActivated = true;
        } else {
            window.clearInterval(windowInterval);
            windowInterval = null;
            isIntervalActivated = false;
        }
   }

所以 checkIfWindowIntervalIsActivated()是我在以下情况下调用的父函数：

1）每当新创建 Gauge Chart时。我触发此调用并有一个 boolean isIntervalActivated，如果它是 false，则触发服务器轮询。

2）现在，如果我已经在选项卡1中创建了图表（因为用户已选择它），那么我现在更改为 tab 2没有该图表。因此，我只需将 isIntervalActivated设置为true即可停止轮询。 This is handled for 1 chart。现在的问题是，如果我想使此函数为 re-usable，请说我想再删除一个相同 type但具有不同 server parameters的图表以进行轮询，如何使用相同的 windowInterval变量它具有我的第一个图表的触发超时值。附言：该值随其发出的每个ajax请求而变化。所以没有 1 single值:(

3）每当其他选项卡中没有相同类型的 chart时，我将停止轮询。这很合理。现在，每当用户在页面加载时放入新的Portlet /时，我都在缓存所有Portlet，从而拉出所有用户配置的Portlet。在这样的 case中，我必须触发所有 charts' ajax调用..每个轮询都对其 configured destination进行轮询。现在，我不知道会有多少个图表，就像我的函数名一样，我正在轮询虚拟机。因此，如果用户使用了VM1，它将切换到VM2，依此类推。

因此，绝对不可能为许多此类相似的图表创建相同的功能。
因此，只想检查我是否可以 re-use同一timeOut的东西，或采取完全 different的方法来解决这个问题:( :(

我希望现在已经很清楚了，否则我可以进一步解释我的情况。
如果需要，请问我更多问题:)
再次感谢！

Answer 1

如果我理解正确，并且您尝试支持同时更新多个图表，那么我将从保留connectToVM()闭包内的图表数据切换到显式的图表对象数组，并使用单个间隔来更新所有图表。

类似于以下内容（将其作为伪代码进行处理）：

var charts = [
  // an array of chart objects, see addChart()
];

function addChart() {
  // when you need to add or remove a chart, update the charts object, like this:
  charts.push({
    update: updateChart,
    nextUpdateTime: null, // or Date.now() if you don't care about old browsers.
    chartData: {host: ..., port: ..., user: ..., passwd: ..., db: ...,
                originalTitle: ..., portalId: ...},
  });
  restartUpdates();
}

var activeInterval = null;
function restartUpdates() {
  if (activeInterval) {
    clearInterval(activeInterval);
  }
  activeInterval = setInterval(updateCharts, 5000);
}

// updates all active charts
function updateCharts() {
  var now = new Date().getTime();
  for (var i = 0; i < charts.length; i++) {
    var chart = charts[i];
    if (chart.nextUpdateTime !== null && chart.nextUpdateTime < now) {
      chart.nextUpdateTime = null; // chart.update() will re-set this
      try {
        chart.update(chart);
      } catch(e) {
        // handle the error
      }
    }
  }

// update a single chart.
// @param |chart| is an item from the |charts| array.
function updateChart(chart) {
  // ...same as your connectToVM() using properties from chart.chartData...
  Ext.Ajax.request(
    // ...
      success: function (response, options) {
        // ...same as before...
        // ...but instead of re-setting the timeout:
        //   windowInterval = window.setTimeout(function() {
        //       connectToVM(portalId, host, port, user, passwd, db)
        //     }
        //   , 4000);
        // ...update the chart's nextUpdateTime:
        chart.nextUpdateTime = (new Date().getTime()) + 4000;
      }
  );
}

下面的初步答案

感谢您的详细问题！感觉您遗漏了一些很明显的问题＃2/3，但是很难看到具体的内容而又看不到更多代码。您能否发布更完整，更简单的示例来说明您要解决的问题？处理伪代码中的活动选项卡的函数可能会有所帮助，如下所示：

function selectTab(tabID) {
  // ...activate tab #tabID in the GUI...
  if (tabID == 1) {
    // there's chart #1 on tab #1, need to stop any active timeouts and start a new one 
    connectToVM("chart #1");
  } else if (tabID == 2) {
    // no charts on tab #2.. need to stop any active timeouts
  } else if (tabID == 3) {
    // ...
  }
}

我不明白的一件事是，是否始终有一个图表需要随时更新？

另外，您知道 A re-introduction to JavaScript中提到的概念，特别是对象吗？

至于问题：


1：是的，应该避免过多的超时（数千秒可能会使CPU变热，浏览器变慢），尽管我更担心服务器，该服务器必须处理来自多个客户端的请求。
2/3：见上文。
4： Comet页列出了许多基本AJAX轮询的替代方法（服务器发送的事件，长轮询，websocket），但我稍后会担心。