タイマーにコールバック関数を設定する

Question

私はこのプログラムを終了するのにとても近く、この最後の部分を理解することはできません。私はランダムに生成された数字をつかむためにサーバに手を差し伸べるWebページを持っています。そしてそれをグラフにプロットします。 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と2番目の関数呼び出しで関数を停止するブール値を実装することでした。

このような何か：

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に設定しました。

以前はtrueの場合はisRunningをfalseに設定してからclearIntervalに進み、それを停止します。このすべてがやったisRunning == true

は、私のプログラムがクラッシュしながら

そして最後には、実行するコールバック関数のためwhileループを設定します。この場合、どうすればsetInterval関数を正しく使用できますか？

Answer 1

setIntervalの代わりに、setTimeoutを使用できます。

XMLHttpRequestを呼び出して応答を処理する関数が1つあります。この関数を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を実行します。 isRunningの評価がtrueの場合は、タイマーは、その後のsetIntervalを止めるクリアされます

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

、このような何かを試してみてください。