SCRAWLED TECH BLOG

当サイトは、アフィリエイト広告を利用しています

setTimeout関数の第2引数を0で使う

作成日：2022月03月12日
更新日：2022年06月11日

setTimeoutの第 2 引数に 0 を設定している処理を見かけることが
があるがどんな時に必要なのかまとめる。

setTimeout関数について

javascript関数ではなくブラウザの機能である。
そのため setTimeout を実行した場合 一旦処理はブラウザに戻り、
その後第二引数で設定した時間がたてば、第一引数に設定したコールバック関数が実行される

第二引数に 0 を設定する意味

意味としては処理の分割をすること。 setTimeout 関数を実行した時点で処理がブラウザに移るため、
javascript でたまっていた DOM 操作を 行わせることができる

【実行順】

js
(function () {
  $("#btnTimeoutSample1").click(function () {
    setTimeout(function () {
      console.log("2回目");
    }, 0);
    console.log("1回目");
  });
});


// 1回目
// 2回目

使用例

例えば angular で非活性項目を活性化後にその項目にフォーカスを当てたい場合などは
通常では javascript で disabled を false にしてから focus しても、DOM 上ではまだ disabled は
true であるため、focus が効かない

フォーカスが効かないパターン

検索ボタンを押下し、API通信を行う。

html
<!-- テンプレート -->
<!-- idで検索 -->
<mat-form-field>
  <input matInput placeholder="label" [(ngModel)]="id" />
</mat-form-field>
<button mat-button (click)="search()">検索</button>
<!-- 検索後に入力項目を活性化 -->
<mat-form-field>
  <input
    matInput
    placeholder="label"
    [(ngModel)]="name"
    disabled="disabledFlg"
  />
</mat-form-field>

APIから値を取得後にsubscribeで入力ボタンを活性後に
その項目に対して、フォーカスを当てる処理を行うとしている

ts
// angularの監視処理
//検索処理の監視
this.service
  .getSearchSubject()
  .pipe(takeUntil(this.subjectOndestroy))
  .subscribe((response) => {
    // 入力項目を活性化
    this.disabledFlg = false;


    // 活性化後にフォーカス
    document.getElementsByName("name")[0].focus();
  });

しかし、下記の理由でフォーカスすることができない

  • 監視処理内でフラグ false にして活性化してるが、DOM には未反映のため focus()が効かない
  • focus は非活性項目には効かない

フォーカスが効かすパターン

setTimeOut内でフォーカスの処理を書くことでsetTimeout処理前に
一旦、処理がブラウザに戻るため、非活性項目が活性化され、
フォーカスができるようになる

ts
// angularの監視処理
//検索処理の監視
this.service
  .getSearchSubject()
  .pipe(takeUntil(this.subjectOndestroy))
  .subscribe((response) => {
    // 入力項目を活性化
    this.disabledFlg = false;


    // setTimeoutのコールバッグ関数でフォーカスする
    setTimeout(() => {
      document.getElementsByName("name")[0].focus();
    }, 0);
  });
  • setTimeOut を実行することで一旦、処理がブラウザに戻るため、入力項目の活性化が DOM に反映される
  • DOM 上で活性化されるため、focue が効く

参考

JavaScript：setTimeout 関数の第 2 引数に 0 を指定する意味
setTimeout(...,0)などの使いドコロ

新着記事

タグ別一覧
top