6
4

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でイベントが1回だけしか起こらない問題の解決法!たった2文字の変更で直る

Last updated at Posted at 2019-10-22

#setInterval(function()←ここに括弧をつけてはいけない!#
たとえば「aiueo」という関数を1秒(=1000ミリ秒)ごとに何回も呼びだしたいとき、

setInterval(aiueo(),1000); #=>初めの1回しかイベントが起きない

↑これだと最初の1回しかイベントが起きません。

思い通りに何回も動かすためには、

setInterval(aiueo,1000); #=>OK!

第1引数の関数名の後ろに「()」を付けない

もしくは、

setInterval("aiueo()",1000); #=>これもOK!

関数名をダブルクォーテーションで囲う

これで解決できます。

#実際に私が失敗したコードと成功したコード#

<失敗例>
ページを開くと「あ」と書かれたポップが出てきて、「OK」を押すたびにポップの内容が「い」「う」「え」「お」に変化、そしてまた「あ」にループするというものです。

i = 0;

function aiueo()
{arr = ["","","","",""];
  alert(arr[i]);
  i++;
  if(i >4){i = 0;}}

onload=function play()
{setInterval(aiueo(), 1000);}

最後の行が
{setInterval(aiueo(), 1000);}となっています。

実行結果は
qiita失敗.gif
最初の「あ」しか出てきません。

<成功例>

i = 0;

function aiueo()
{arr = ["","","","",""];
  alert(arr[i]);
  i++;
  if(i >4){i = 0;}}

onload=function play()
{setInterval(aiueo, 1000);}

最後の行を修正、
{setInterval(aiueo, 1000);}に。

実行すると
qiita_success.gif

しっかり思い通りに動いてくれました。

以上です!
setIntervalに苦しむ方がもしいれば、助けになれれば幸いです。

6
4
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
6
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?