JavaScriptの非同期処理

2015年2月4日 - 未分類

Javascriptで重たい処理をさせると、マウスがグルグル回るアイコンになって、ブラウザが固まってしまいます。マウスのグルグルが止まるまで、何もできません。JavaScriptは、同期処理なので、重たい処理が終わるまで、なにもできなくなります。Webアプリでは、よく見る光景なのですが、何とかならないものかと試行錯誤しました。

結論から言いますと、Pot.js というライブラリーを使わせてもらって、改善できました。Deferred.forEach文を使います。

potliteライブラリーを読み込んでおきます。

<script src="http://api.polygonpla.net/js/pot/potlite/1.38/potlite.min.js"></script>

最初に、

Pot.globalize();

として初期化しておくだけです。

後は、重たい処理に、Deferred.forEachを使うだけです。

highChartGraphの場合、addPointが重たいので、ここだけは、Deferred.forEachを使います。

Deferred.forEach(ary, function(value, key) {
point.addPoint(parseFloat(ary[i]));
if((i % parseInt(m/100)) === 0 ){
prog.value= parseInt(i/m*100);
prgVal.innerHTML= parseInt(i/m*100)+'';
console.log('prog '+(i % parseInt(m/100)) +' '+parseInt(i/m*100)+' % '+'val = '+parseFloat(ary[i]));
}
i++;
});

ついでに、プログレスバーも付けておきました。これが伸びているのを見ていれば、気も紛れます。結果的に、気持ちいいくらいに、スムーズにグラフが伸びていきました。

注意）　SafariやOperaでは動作しました。 iPhoneでは表示されました。Android端末では未テストです。 kindle Fireで動作確認できました。Android系でも動作するようです。