非同期通信（Ajax）をするときはタイムアウト処理を必ず入れてほしい（切実）

非同期通信（Ajax）を行うとき、きちんとタイムアウト処理を入れていますか？ スマートフォンやタブレットでWebサイトを閲覧しているとき、地下に入ったりして通信ができなくなるというケースは頻繁に起こります。そんなとき、きちんとタイムアウト処理をしていないと、場合によってはいつまで経ってもローディングが終わらず、ユーザーが離脱してしまうということが起こります。質の高いWebコンテンツ制作のために、必ずタイムアウト処理は入れましょう。

jQueryでの実装例

たとえばjQueryでAjaxを扱うajax()メソッドには、timeoutという便利なオプションがあります。timeoutに指定した時間（ms）が経過しても通信が完了しない場合、エラー処理が実行されます。手軽に実装できるので、ajax()メソッドを使うときは必ず設定しましょう。

JavaScript

// 10秒経っても通信が成功しない場合は失敗処理を実行する例
$.ajax({
    type:"GET",
    url:hogeURL,
    cache: false,
    timeout: 10000
}).then(
  successHandler,
  errorHandler
);

高い確率で失敗するAjaxのデモ

ajax()メソッドのtimeout指定時の挙動を確かめるため、jsdo.itにデモをアップしました。
高い確率で失敗するAjax
「ロード開始」をクリックすると、テキストファイル http://jsrun.it/assets/g/4/B/4/g4B4z を取得開始します。1ms以上の時間がかかったら「通信失敗」のアラートが表示されます。多くの環境でエラー処理が実行されるでしょう。

最後に

先日電車の中で某スマートフォンサイトを閲覧している時、地下に入りました。ちょうどWebサイトでは非同期通信が始まり、ローディング画面が表示されました。地下を抜けても、ずっとそのサイトはローディング画面のまま何も起こらず、私はWebサイトを離脱しました。「ローディング」の表示だけだとユーザーは何が起こっているのかわかりません。時間がかかっていたり通信に失敗しているならばきちんとその旨を説明してあげるのが親切でしょう。