setTimeout anchor.png

  • アニメーションを組むときに便利な関数。とあるリファレンスには「指定した関数を指定時間後に1回だけ呼び出します」と書いてあった。なんだか簡単そうだけど、初心者にはつまづきドコロなんじゃないだろか?自分だけ?
Page Top

第3引数以降を使えない場合 anchor.png

setTimeoutの第3引数以降というのは第1引数である関数のパラメータ。とっても便利。でも、ie9以下では使えないそうな。そういうときは第1引数の関数を無名関数で囲むとよい。

Everything is expanded.Everything is shortened.
1
2
3
4
5
6
-
|
|
|
|
!
(function test(n){
  if(n<0)return;
  console.log(n);
  n--;
  setTimeout(function(){test(n);},100);
})(4);
Page Top

非同期処理 anchor.png

setTimeoutは非同期処理なのです。これを知らないで使うと必ずハマる。

Page Top

まずはsetTimeoutを使わない場合 anchor.png

Everything is expanded.Everything is shortened.
1
2
3
4
5
6
7
8
 
-
|
|
|
|
!
 
console.log("count down");
(function(n){
  if(n<0)return;
  console.log(n);
  n--;
  arguments.callee(n);
})(4);
console.log("end");

実行結果はこう

count down
4
3
2
1
0
end
Page Top

setTimeoutを使うとこうなる anchor.png

Everything is expanded.Everything is shortened.
1
2
3
4
5
6
7
8
 
-
|
|
|
|
!
 
console.log("count down");
(function(n){
  if(n<0)return;
  console.log(n);
  n--;
  setTimeout(arguments.callee,0,n);
})(4);
console.log("end");

結果はこう

count down
4
end
3
2
1
0

ループの終了を待たずに次の処理に進んでしまう。こういうのって、jqueryとかnode.jsを使っているときにも度々遭遇したりする。

Page Top

thisの参照先が変わる anchor.png

Page Top

setTImeoutを使わない場合 anchor.png

Everything is expanded.Everything is shortened.
1
2
3
4
5
6
7
8
-
-
|
|
|
|
!
!
({
  start : function(n){
    if(n<0)return;
    console.log(n);
    n--;
    this.start(n);
  }                           
}).start(4);

結果はこう

4
3
2
1
0
Page Top

setTimeoutを使うと anchor.png

Everything is expanded.Everything is shortened.
1
2
3
4
5
6
7
8
-
-
|
|
|
|
!
!
({
  start : function(n){
    if(n<0)return;
    console.log(n);
    n--;
    setTimeout(this.start,0,n);
  }                           
}).start(4);

結果はこう

4
3

途中で止まってしまう。これ、はじめは原因がわからずに困り果てたもんだ。

Page Top

thisの参照先を見てみる anchor.png

Everything is expanded.Everything is shortened.
1
2
3
4
5
6
7
8
-
-
|
|
|
|
!
!
({
  start : function(n){
    if(n<0)return;
    console.log(n+":"+this);
    n--;
    setTimeout(this.start,0,n);
  }                           
}).start(4);

結果はこう

4:[object Object]
3:[object Window]

thisの参照先が変わってしまったことがわかる。

Page Top

こうやって対処した anchor.png

bindを使ってthisの参照先を固定してみる。

Everything is expanded.Everything is shortened.
1
2
3
4
5
6
7
8
-
-
|
|
|
|
!
!
({
  start : function(n){
    if(n<0)return;
    console.log(n);
    n--;
    setTimeout(this.start.bind(this),0,n);
  }                           
}).start(4);

結果は省略。オーライです。

Page Top

ES6ではこうだった anchor.png

アロー関数というのを使うとthisの参照先がブレない。

Everything is expanded.Everything is shortened.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
 
 
 
 
-
-
|
|
|
|
!
!
 
#!/usr/bin/env node
 
'use strict'
 
let js00 = {
  start : function(n){
    if(n<0)return;
    console.log(n);
    n--;
    setTimeout(()=>this.start(n),0);
  }
}
js00.start(4);

トップ   凍結 差分 バックアップ 複製 名前変更 リロード   ページ新規作成 全ページ一覧 単語検索 最新ページの一覧   ヘルプ   最新ページのRSS 1.0 最新ページのRSS 2.0 最新ページのRSS Atom
Counter: 85, today: 1, yesterday: 0
最終更新: 2016-11-26 (土) 17:17:05 (JST) (302d) by admin

twitter検索
検索ワード:setTimeout
* setTimeout より恣意的に、idle したときにやってほしいのをアレできる #html5j_h
* 長いイベントループで他が割り込めるように、settimeoutなど使う #html5j_h
* シングルスレッドなので、スレッドを占領する処理を潰したりsetTimeout 等でイベントループに任せたりWebWorker で並列化するなどして対策する #html5j_h
* setTimeoutを使うと、カウントダウンなどの処理を比較的簡単に書くことが出来ます。ただ、再帰処理との組み合わせなので慣れてない場合はちょっと難しいかもしれませんね。
* 昨日のこれ、結局setTimeoutで微時間後にselectedIndexを付け直して、ついでにF5キー押下時に強制リロードするようにもしておいた…ダサいけど仕方がない
* setTimeoutを使うと、カウントダウンなどの処理を比較的簡単に書くことが出来ます。ただ、再帰処理との組み合わせなので慣れてない場合はちょっと難しいかもしれませんね。
* // Delay displaying loading image setTimeout(function(){ ... を発見してしまった…
* ところで非同期実行対応ってなんだろう? スクリプト側をイベントドリブンで書いたり、SetTimeoutなりなんなりすればそれが非同期実行だと思うのだけど… #GreaseMonkey
* @MysticDoll したよ、IEのsetInterval()にバグが有ったからsetTimeout()使ってなあ
* RでもsetTimeoutみたいなことしたい

wikipedia検索
検索ワード:setTimeout
* ViolaWWW getHours() + ":" + tDate.getMinutes() + ":" + tDate.getSeconds(); setTimeout("showTimeInDoc()", 1000); } Webページへのスクリプト埋め込み <HTML> <HEAD> </HEAD>
* Mozilla Firefoxのバージョンの変遷 2011年6月21日にリリースされ、 Firefox 6 のリリースをもってサポートが終了した。 CSSアニメーションに対応した。 バックグラウンドのタブで設定されている setTimeout と setInterval のタイマー間隔が、パフォーマンス向上のため 1000ms に固定された。 2011年8月16日にリリースされ、Firefox


(c) 2017 xxxs500