LoginSignup
0
0

More than 1 year has passed since last update.

「setInterval」一定間隔で繰り返し実行

Posted at

コード構文

setInterval(「関数①」,「秒数」);

この関数setIntervalは
「一定間隔(「秒数毎」)で関数①を呼び出し続ける」
というものです。
実際に例でどういうものかを見ていきます。

コード例

function console1(){
  console.log("tagotyan");
}
setInterval(console1,300);

上記記述は
・コンソールに「tagotyan」という文字列を出力する関数を定義。
・setInterval関数を使用して「関数①」に「console1関数」を、「秒数」に「300」を記述しています。
・「0.3秒に一回「tagotyan」をコンソールに出力し続ける」という意味になります。
ここでの「300」は0.3秒、仮に「1000」だと1秒ですね。

次は二次元配列で定義した変数をランダムで呼び出し続ける時の注意点です。

ランダム変数コード構文

let 二次元変数名=[[],[]];
let 乱数変数名=Math.floor(Math.random()*(二次元変数名.length));

ランダム変数一定間隔呼び出し関数コード構文

function 関数名(){
  console.log(二次元変数名[乱数変数名]);
}
setInterval(関数名,秒数);

このコードでは
・配列の中に配列がある二次元配列の変数を定義。
・後に出力する用の配列番号を乱数で呼び出せるように乱数変数名を定義。
・二次元配列を乱数で出力する関数を定義。
・setInterval関数を使用して「関数①」を「秒数」毎に呼び出し続ける。
という内容です。
「Math.random()」では小数点以下しかランダムで出ないため、
「二次元変数名.length」を使って二次元配列の数をかけることにより1の位に乱数を適用させ、
それを「Math.floor()」で小数点以下を切り捨てています。

このコード構文も実際に例でどういうものかをやりますが、
失敗例と成功例の2つを見ていきます。

失敗コード例

let sample=[["tagotyan"],["tagokun"]];
let randomSample=Math.floor(Math.random()*(sample.length));
function console1(){
  console.log(sample[randomSample]);
}
setInterval(console1,300);

この二次元配列と乱数定義を関数外に出しているコードだと、
最初の一回のみ乱数で二次元配列変数「sample」が出力され、
後は一度取得した変数「sample」を0.3秒毎に出力し続けるため、
0.3秒毎に最初の一回と同じものが出力し続けてしまいます。

成功コード例

function console1(){
  let sample=[["tagotyan"],["tagokun"]];
  let randomSample=Math.floor(Math.random()*(sample.length));
  console.log(sample[randomSample]);
}
setInterval(console1,300);

このように関数内に、二次元配列と乱数定義を入れて定義していることで、
関数「console1」を0.3秒毎に呼び出し続けるたびに、
乱数定義により、毎回「tagotyan」「tagokun」をランダムで出力できるようになりました!

0
0
1

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
0
0