1

JQWidgetsを使用して円グラフを作成しています。そして、それはすべてうまくてダンディで、魅力のように機能しています。しかし、私がやりたいことは、x 秒ごとにデータを更新することです。jQueryを使用して、これまでに持っているコードは次のとおりです。

function loadChart(id,name){
   //chart loads here
   var speed = 5000,
       t = setInterval(reloadData,speed);
   function reloadData() {
        source.url = 'data.php?id='+id;
        var dataAdapter = new $.jqx.dataAdapter(source);
        $('#pie').jqxChart({ source: dataAdapter });
        console.log('reloading pie...'+globalPieId);
        speed = 5000;
        clearInterval(t);
        t = setInterval(reloadData, speed);
    }
}

私の問題は、loadChart 関数が呼び出されると、setInterval の別のインスタンスが作成され、3 ～ 4 回後にチャートが常に更新状態になることです。1 つのインスタンスのみが呼び出されるように setInterval 呼び出しを最適化するにはどうすればよいですか?

前もって感謝します。

4

2 に答える 2

7

関数を何度も呼び出す関数を使用する代わりに、指定したコールバックを一度だけ呼び出す関数をsetInterval使用する方がよいでしょう。setTimeoutそのコールバックが呼び出されたら、もう一度呼び出すことができsetTimeout、現在抱えている問題はなくなります。また、最後の呼び出しが完了するまで待ってから、別の呼び出しを開始することもできます。この変更により、コードは次のようになります。

function loadChart(id,name){
   //chart loads here
   var speed = 5000,
       t = setTimeout(reloadData,speed);
   function reloadData() {
        source.url = 'data.php?id='+id;
        var dataAdapter = new $.jqx.dataAdapter(source);
        $('#pie').jqxChart({ source: dataAdapter });
        console.log('reloading pie...'+globalPieId);
        speed = 5000;
        t = setTimeout(reloadData, speed);
    }
}

有効な poc については、http://jsfiddle.net/9QFS2/ を参照してください。

于 2013-09-24T17:23:07.507 に答える