设置定时器的回调函数

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 之前为假（表明它现在正在进行中），我将它设置为真。

如果之前为真，我将isRunning 设置为假，然后转到clearInterval 以停止它。

最后设置一个while循环让回调函数执行whileisRunning == true

这一切只是让我的程序崩溃。在这种情况下如何正确使用setInterval函数？

Answer 1

在传递给 setInterval() 的回调中执行检查 isRunning == true。试试这样的，

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

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

Answer 2

可以使用 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();
}