このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

XMLHttpRequestEventTarget: timeout イベント

メモ: この機能はウェブワーカー内で利用可能ですが、サービスワーカーでは使用できません。

timeout イベントは、設定された時間が経過したことで進行が終了すると発行されます。

構文

このイベント名を addEventListener() のようなメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

js
addEventListener("timeout", (event) => { })

ontimeout = (event) => { }

イベント型

ProgressEvent です。 Event から継承しています。

Event ProgressEvent

イベントのプロパティ

以下に挙げたプロパティに加えて、親インターフェイスである Event から継承したプロパティが利用できます。

lengthComputable 読取専用

論理値のフラグで、このプロセスで行われる作業の合計と、すでに行われた作業の量が計算可能かどうかを示します。言い換えれば、進捗が計測可能かどうかを示します。

loaded 読取専用

64 ビット符号なし整数値で、このプロセスで既に作業を行った量を示します。作業した比率は、total をこのプロパティの値で割ることで算出できます。 HTTP を使用してリソースをダウンロードする場合、これは HTTP メッセージの本文のみをカウントし、ヘッダーやその他のオーバーヘッドは含まれません。

total 読取専用

64 ビット符号なし整数で、基礎となるプロセスが実行中の作業の総量を表します。 HTTP を使用してリソースをダウンロードする場合、これは Content-Length (メッセージの本文のサイズ)であり、ヘッダーやその他のオーバーヘッドは含まれません。

XMLHttpRequest での使い方

js
const client = new XMLHttpRequest();
client.open("GET", "http://www.example.org/example.txt");
client.ontimeout = () => {
  console.error("Timeout!!");
};

client.send();

イベントハンドラーは addEventListener() メソッドを使用して設定することもできます。

js
client.addEventListener("timeout", () => {
  console.error("Timeout!!");
});

XMLHttpRequestUpload での使い方

timeout イベントを使用すると、アップロードが遅すぎるために停止したことを検出することができます。ファイルをアップロードして進捗バーを表示する完全なコード例については、メインの XMLHttpRequestUpload ページを参照してください。

The timeout is set on the XMLHttpRequest object using the XMLHttpRequest.timeout property.

js
// タイムアウトが発生した場合、進捗バーを非表示にする
// なお、このイベントは xhr オブジェクトでも待ち受けすることができる
function errorAction(event) {
  progressBar.classList.remove("visible");
  log.textContent = `アップロードに失敗しました: ${event.type}`;
}
xhr.upload.addEventListener("timeout", errorAction);

仕様書

Specification
XMLHttpRequest
# event-xhr-timeout
XMLHttpRequest
# handler-xhr-ontimeout

ブラウザーの互換性

api.XMLHttpRequest.timeout_event

api.XMLHttpRequestUpload.timeout_event

関連情報