Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
668
Help us understand the problem. What is going on with this article?
@tonkotsuboy_com

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

More than 1 year has passed since last update.

非同期通信(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サイトを離脱しました。「ローディング」の表示だけだとユーザーは何が起こっているのかわかりません。時間がかかっていたり通信に失敗しているならばきちんとその旨を説明してあげるのが親切でしょう。

668
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
tonkotsuboy_com
フロントエンド / 九州大学卒 / ウェブ制作 / JavaScriptコードレシピ集の著者 / CSS Nite 2017〜2019ベストセッション / TechFeed公認エキスパート /お仕事依頼はDMまで
moneyforward
「お金を前へ。人生をもっと前へ。」をMissionとして、個人向け、法人向け様々なFintechサービスを開発、提供しています。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
668
Help us understand the problem. What is going on with this article?