6
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

AngularJSの$timeoutを引数無しで実行した時の挙動

Posted at

AngularJSで以下のコードに遭遇する時がたまにある。

$scope.data = resultData;

$timeout(function() {
  // 何かDOMを弄ぶ処理
  $('.test').addClass('xxx');
});

$timeoutって秒数を指定して遅延させる処理なんじゃないの?
何で引数なしに使っているのか、$timeout無しでもいいんじゃないのか。

AngularJSの$timeoutサービスはwindow.setTimeoutのラッパーなので、
上記の書き方はsetTimeout(Function, 0)に等しいです。

上記の理由は以下のサイトの説明がわかりやすかったです。
遅延実行 | JavaScript プログラミング解説
http://so-zou.jp/web-app/tech/programming/javascript/window/delay.htm

スクリーンショット 2015-11-11 17.35.15.png

つまりはイベント発火時の関数(イベントハンドラ)やDOMの状態の更新が終了してからsetTimeout内にセットした関数が呼び出されるということ。0秒はドキュメントの状態が整ってからからなるべく早く実行するよーという意味。

0秒を指定してもその処理が実際に行われるのは平均0.4秒くらいかかるらしいです。
だからなるべく早くの意味で0秒を指定するらしい。

AngularJSではサービスから受け取った内容をスコープに保存してその結果をビューに表示するということが基本ですが、
最初に挙げた例では、そのスコープ結果のDOMにJQueryでClassを追加しており、ドキュメントの状態が整ってからでないとエラーになるんですね。だからこのように書きます。ハックですね。。

もちろん、明示的にもっと遅くしたい時は1000を指定したりは自由に出来ます。

6
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?