0

2 つの異なる一連のグラフを表示する 2 つのボタンがあります。グラフの各シリーズは、3 秒の遅延で徐々に上下に表示されます。ユーザーが最初のボタンをクリックすると、最初のシリーズが徐々に表示され、2 番目のボタンをクリックすると、最初のシリーズが削除され、2 番目のシリーズが 1 つずつ徐々に表示され始めます。

コードの一部は次のとおりです。

<button type="button" onclick="show_graphs(1)"></button>
<button type="button" onclick="show_graphs(2)"></button>

<div id="stats"></div>

function show_graphs(type) {
    var i = 0;
    $('#stats').html('');
    $.getJSON('stats.php?type=' + type, function (data) {
        for (chartData in data) {
            i++;
            var timer = setTimeout(function(index,d1){
                return function() {
                    var chart = new AmStockChart();
                    dataSet.dataProvider = data[d1];
                    // etc. etc.

                    $('#stats').append('div id="chartdiv' + index + '"></div>');
                    chart.write("chartdiv" + index);
                }
            }(i,chartData), 3000*i);
        }
    });

問題は、最初のシリーズの追加が完了する前にユーザーが 2 番目のボタンをクリックすると、div がクリアされますが、最初のシリーズはそのグラフを追加し続け、次に 2 番目のシリーズが追加されることです。したがって、別のパラメーターを使用して 2 回目に実行する前に、最初の setTimeOut を停止する必要があります。使用する必要があることを理解しています

clearTimeout(timer)

...しかし、どこで使用するのかわかりません。どこに置いても「不明な変数タイマー」が表示されます。

4

1 に答える 1

2

clearTimeout()何らかの効果を得るには、タイムアウト期間の前、つまりバインドされた関数が呼び出される前に呼び出す必要があることに注意してください。第二に、あなたの場合、グラフのレンダリングはすでに開始されているため、それclearTimeout()だけでは十分ではありません。

ある種のフラグを使用して、グラフのレンダリング操作を中止する必要があるかどうかを示すことができます。

例：

// cancel indicator
var cancelGraph = {}, timer;

function show_graphs(type) {

    // abort any other rendering
    clearTimeout(timer); // clear timeout if rendering not already started

    // cancel other running operations
    for(var otherType in cancelGraph) {
        if(otherType !== type) cancelGraph[otherType] = true;
    }

    $('#stats').html('');

    // set current one as non-cancelled
    cancelGraph[type] = false; 

    var i = 0;

    $.getJSON('stats.php?type=' + type, function (data) {
        for (chartData in data) {

            if(cancelGraph[type] === true) break; // abort: don't continue rendering

            i++;
            timer = setTimeout(function(index,d1){
                ...
            }(i,chartData), 3000*i);
        }
    });
}
于 2013-10-27T13:05:36.443 に答える