jQuery入門講座使い方-バグノート(1)

バグノート(1)

ここでは私が制作中に出会ったバグとその回避方法をメモしておく場所です。仕事がらみで経験したバグはサンプルを提示できないのですが、何かの参考になればと思います。

ちなみに本家のサイトにもバグノートがあります（英語）。→bug tracker: timeline

外部データ（csv）の読込の直後にページにタグを追加できない

発生環境

2013年8月：safari/chromeにて発生。jQueryのバージョンは1.9.1。

現象

getメソッドを利用してcsvデータを読込、そのデータをhtmlデータに成形しhtmlメソッドを利用してコンテンツを追加したところ、約50%位の確率でコンテンツが追加されませんでした（ローカル環境でも発生）。またappendメソッドを利用する方法に変えてみてもダメでした。

考察

getメソッドのステータスを監視すると、データの読込は100%成功していました。またネットでhtmlメソッドのバグについて調べても該当する現象はなく、htmlメソッドの問題でもなさそうです。なので、連携の問題だと見て以下の回避方法につながりました。

回避方法

上記のように連携時に問題が発生していると考えたので、readyイベントのタイミングでcsvデータを読込、htmlデータが必要になった時（特定のボタンがクリックされた時）にhtmlメソッドでコンテンツを追加するようにしました。結果として問題は発生しなくなりました。
今回のケースでは読み込んだ直後にhtmlメソッドを利用する必要がなかったので上記のように対応できましたが、読み込んだ直後にコンテンツを追加する場合はsetTimeoutメソッドなどで実行タイミングを少しずらすと良いのかもしれません。

animateメソッドのstep処理がcomplete処理の後に発生

発生環境

2013年1月：Machintosh chrome(24.0.1312.52)にて発生。
jQueryのバージョンは1.8.2を利用、途中で1.9.0にバージョンアップしたものの修正されませんでした。

現象

animateメソッドでは第2引数のオブジェクトにstep処理とcomplete処理を設定できます。step処理はアニメを実行中に連続的に実行される処理で、complete処理はアニメが完了した時に実行される処理です。そのため、必ずstep処理よりも後にcomplete処理が実行されるはずなのですが、complete処理の後にstep処理が発生してしまう現象に出会いました。

考察

発生したコンテンツではstep処理で負荷の高い計算処理を実行していました。処理の数を減らしたところ問題が回避できたため、原因はstep処理の負荷と考えられます。ちなみにMacはCPU8コアの私のメインマシンなので、PCのスペックというよりchromeの問題のように感じました。

回避方法

フラグを設置して問題を回避しました。completeで実行しているfunction内でフラグを立て、stepで実行しているfunction内でフラグを監視し、フラグが立っている場合は処理を実行しないようにしました。ブラウザ側の問題と考えられるため、根本的な解決ではなく対処療法となりました。

fadeInメソッドが実行されない（上記バグと関連）

発生環境

上記バグノート「animateメソッドのstep処理がcomplete処理の後に発生」と同じ環境で発生（同じコンテンツです）。

現象

animateメソッドのcomplete処理内に設置したfadeinメソッドが機能しない。

考察

バグの発生したコンテンツではstep処理だけでなくcomplete処理でも負荷の高い処理をしています。それが影響しているようです。

回避方法

fadeInメソッドを負荷の高い処理の前に実行することで問題を回避することができました。