Question

我已经接近完成这个计划了，我无法弄清楚这最后一块。我让我的网页联系到服务器以获取随机生成的数字，然后将其绘制到图表上。我需要设置它以便每2秒绘制一次数据点，我无法弄清楚如何设置setInterval命令。我可以使用for循环来处理它，但这显然没有定时。当我将限制设置超过某个阈值时，它也会崩溃，这可能表示在尝试使用计时器时出现问题。我会发布我的代码以及我尝试过的一些内容。

代码优先：

function plotData(dataSet) 
{
var x = xScale+20; // 20 = margin length
var y = 260;    //origin of graph

context.strokeStyle="#0000FF";
context.beginPath();

for (i = 1; i <= 10; i++)
{
  getRequest(function(random)
  { 
    var diff = (dataSet[0]*100) - (dataSet[1] * 100);
    diff = diff/5;                                                          
    y = y+(diff*23);

    context.lineTo(x, y);
    context.moveTo(x, y);
    context.stroke();   

    x=x+xScale;
    console.log("dataSet = "+dataSet[0]+", "+dataSet[1]);
    dataSet[0] = dataSet[1];
  });   
}
}

我现在将它设置为一个循环用于调试目的。

回调函数到达XMLHttpRequest以获取随机数（如果需要，我也可以发布此代码）。

我试图做的是实现setInterval和一些布尔值来在第二次函数调用时停止该函数。

这样的事情：

var isRunning = false;

function plotData(dataSet) 
{
 if (isRunning == false)
 {
  isRunning = true;
 }

 if (isRunning == true)
 {
  isRunning = false;
  myTimer = clearInterval();
 }
var myTimer;
var x = xScale+20; // 20 = margin length
var y = 260;    //origin of graph

context.strokeStyle="#0000FF";
context.beginPath();

 while (isRunning == true)
 {
  myTimer = setInterval(function()
  { 
   getRequest(function(random)
   {    
    var diff = (dataSet[0]*100) - (dataSet[1] * 100);
    diff = diff/5;                                                          
    y = y+(diff*23);

    context.lineTo(x, y);
    context.moveTo(x, y);
    context.stroke();   

    x=x+xScale;
    console.log("dataSet = "+dataSet[0]+", "+dataSet[1]);
    dataSet[0] = dataSet[1];
   });
  }, 2000);

 }
}

我为处理目的添加了一个全局布尔值isRunning。

我将isRunning设置为true，如果之前为false（表示它现在正在进行中）。

如果之前为真，我将isRunning设置为false，然后继续clearInterval停止它。

最后为while

执行回调函数设置isRunning == true循环

所有这一切都让我的计划失败了。在这种情况下，如何正确使用setInterval函数？

Answer 1

使用setTimeout。

代替setInterval

将有一个函数调用XMLHttpRequest并处理响应。从XMLHttpRequest中的响应回调中调用此函数setTimeout。这意味着下一个请求将始终在最后一个响应（和最后一个绘图）后2秒。这样可以避免使用标志来检查是否有正在进行的请求。

function plotData(dataSet) {
  var x = xScale+20; // 20 = margin length
  var y = 260;    //origin of graph

  context.strokeStyle="#0000FF";
  context.beginPath();

  var counter = 10;

  function plotPoint() {
    getRequest(function(data) {
      var diff = (dataSet[0]*100) - (dataSet[1] * 100);
      diff = diff/5;
      y = y+(diff*23);

      context.lineTo(x, y);
      context.moveTo(x, y);
      context.stroke();   

      x = x + xScale;
      console.log("dataSet = "+dataSet[0]+", "+dataSet[1]);
      dataSet[0] = dataSet[1];

      if (counter-- > 0) {
        setTimeout(plotPoint, 2000);
      }
    }
  }

  plotPoint();
}

Answer 2

在传递给setInterval（）的回调中执行检查isRunning == true。试试这样的事情，

＆＃13;

myTimer = setInterval(function(){
  if(isRunning == true) {
    /* clear the timer */
  }
  /* Else perform the request */
}, 2000)

＆＃13;

当isRunning评估为真时，计时器将被清除，停止后续setInterval。

将回调函数设置为计时器

2 个答案: