59
48

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.

setInterval()やsetTimeout()で関数に引数を与えるには

Last updated at Posted at 2015-08-23

setIntervalについてですが、setTimeoutも同じです。

直感的に書くと

const hoge = word => {
	console.log(word);
};

const timer = setInterval(hoge('hoge'),1000);

なぜか繰り返されない...

そこで調べてみた
window.setInterval - Web API インターフェイス | MDN

###構文

var intervalID = window.setInterval(func, delay[, param1, param2, ...]);

funcは繰り返し呼びたい関数
delay は、インターバルの時間(ミリ秒)
param1, param2,... はパラメーター

これで、3つ目に引数を与えればいいのかと思ったが
Internet Explorer では動作しない
と注意書きが...
追記 : IEは10以降であれば機能するらしいです。(コメントより)

そこでもっと見てみると

###コールバックの引数

setInterval() は指定ミリ秒に呼び出されたコールバックをコールバック関数に引き渡しますが、もしそれが引数のように他のものを期待している場合、それを混同する可能性があります。この問題を回避するためには、コールバックを呼び出すために無名関数を使用してください。

コールバック関数に引数を渡す必要があり、それを setInterval() で追加の引数の指定をサポートしない Internet Explorer でも動作するようにさせる必要がある場合にも、同じテクニックを使うことができます。

とのことでやってみた

const hoge = word => {
	console.log(word);
};

const timer = setInterval(function(){hoge('hoge')},1000);

追記 :

    また、以下の方法でもできるそうです(コメントより)
const hoge = word => {
	console.log(word);
};
const timer = setInterval(hoge.bind(undefined, "hoge"), 1000);

##まとめ
setInterval()やsetTimeout()に与える関数に引数を与えるには
"無名関数を使いその中で実行する"

59
48
3

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
59
48

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?