LoginSignup
29
16

More than 5 years have passed since last update.

setTimeout、setIntervalでコールバックに引数を渡したい!

Last updated at Posted at 2017-04-29

以前、setTimeout()に引数を渡す際にけっこう躓いたので、備忘録。

引数とか余裕やん?

という気持ちで初心者(私)が得意げに書いたコードが以下のもの、、

test01.js
function hoge(word) {
  alert(word);
}
setTimeout(hoge('余裕やん?'), 3000);

三秒後にアラート表示されるだろうと思いきや、これではすぐに実行されてしまい、遅延が生じない。

あれ?なんかわからんけど関数宣言やったらダメなん・・・?
と思い、以下のコードを書いてみる。

test02.js
var hoge = function(word) {
  alert(word);
}
setTimeout(hoge('え、余裕やん?'), 3000);

関数式でもやっぱりダメ。すぐ実行される。

解決方法

その1:コールバックに書けないなら、コールバックに無名関数を渡して、その中で呼び出せばいいじゃない
なパターンが以下。これが一番主流っぽい。

test03.js
function hoge(word) {
  alert(word);
}

setTimeout(function() {
 hoge('余裕やん?');
}, 3000);

その2:第三引数に渡せるらしいやーん!
一番、シンプルでわかりやすいのがこちら。ただ、IEで実現させるためには別途互換コードの記述が必要とのこと。

test04.js
function hoge(word) {
  alert(word);
}

setTimeout(hoge, 3000, '余裕やん?');

その3:文字列で指定もできる

test05.js
function hoge(word) {
  alert(word);
}

setTimeout("hoge('余裕やん?')", 3000);

追記:

その4:bindを使用する!(※コメントより)

test05.js
function hoge(word) {
  alert(word);
}

setTimeout(hoge.bind(this, '余裕やん?'), 3000);

上記の方法でも同じことが可能なようです!bind便利!

まとめ

当時、js勉強し始めたばかりの頃に全然解決方法がわからずかなりはまりこみました。。
ところがどっこい!
ぜーんぶ!mozilla の API リファレンスページに載ってました。

window.setTimeout - Web API インターフェイス | MDN

初心者すぎるとそもそもリファレンスが読めないんですよね。。ちゃんとリファレンス読めるようになったのが、成長ということで。

※setIntervalも同じ方法で渡せます!

追記:

第三引数を渡すパターン以外はthis値が変わってしまうようですね。
this値を変化させないことを踏まえた解決方法は以下になります。(コメントより)

setTimeout(function() { hoge.call(Function('return this')(),'余裕やん?'); }, 3000);

setTimeout("hoge.call(this, '余裕やん?')", 3000);

setTimeout(hoge.bind(Function('return this')(), '余裕やん?'), 3000);                 
29
16
8

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
29
16