WEBサイトにおいて、変数の値/秒後に処理を実行する方法

WEBサイト関連の処理において「変数の値に従った秒数後に処理を実行する方法」を探しております。

例えば、シンプルに1秒後に処理を実行しようとすると以下のような処理になるかと思います。

JavaScript
1const foo;
2foo = () => {
3  ※処理
4}
5setTimeout(foo, 1000);

そのうえで、私が探しているのは以下のような処理です。

JavaScript
1const foo;
2const time = 1000;
3foo = () => {
4  ※処理
5}
6setTimeout(foo, time);

変数の値に応じた秒後に処理を実行させたいのです。
setTimeoutに限らず、何か方法がありましたら、ご回答のほう、よろしくお願い申し上げます。

kei344

2019/03/21 14:31

setTimeoutで何か問題あるのでしょうか。

AGadget

2019/03/21 14:49

早速回答ありがとうございます。 setTimeoutに、変数を入れるというのは実際試してみたのですが反応しませんでした。どうも変数であったり計算式の類は読み取らないようなのです。

行動規範の内容に同意します

回答2件

ベストアンサー

setTimeoutに、変数を入れるというのは実際試してみたのですが反応しませんでした。

提示のコードにそもそもの問題があるため、エラーがでています。

js
1const foo; // これが問題
2const time = 1000;
3foo = () => { // 当然再代入できないからエラー
4  //※処理
5}
6setTimeout(foo, time);
7```↓
8```js
9const time = 1000;
10const foo = () => {
11  console.log( 'test' );
12}
13setTimeout(foo, time);

投稿2019/03/21 14:53

kei344

総合スコア69407

AGadget

2019/03/21 14:59

すみません。初歩的なところで間違えておりました。ありがとうございます。

行動規範の内容に同意します

変数の値に従った秒数後に処理を実行する方法

質問文は再代入不可能のルールでエラーが出ているだけですが、
これに関する思想的な話でもしていきます。

その方法は、setTimeoutかsetInterval以外ありません。
JavaScriptはシングルスレッドで、処理実行中ブラウザのレンダリングが停止するという作りになっています。
したがって、下記のような無限ループをJavaScriptのコードで仕込めばブラウザは応答しなくなります。
（Chrome等はタブ毎にスレッドを分けているので１個のタブが応答しなくなってもすぐに殺せますが）

JavaScript
1while (true) {
2  console.log('何回閉じても無駄ですよ〜');
3}

なのでJavaScriptはさっさと処理を完了、
ブラウザにボールを投げ返してあげたいわけですね。
だからPHPのsleepみたいに一度そこで停止させるみたいな手は使えません。

なので、JavaScriptはイベント駆動という切り口で解決します。
イベント置き場に、イベント達成条件と実行して欲しい関数をセットで登録します。
ブラウザは暇な時に達成したイベントはないかな？と巡回しており、達成したイベントがあれば関数を実行します。

今回のsetTimeoutは指定した時刻を過ぎたら実行で、
このイベント駆動的なアプローチでsleepに似たようなものを実現しています。
その辺の事情から、一定時間待つという事がやりたければsetTimeoutを使う事になります。
(トンチ的なアプローチで他でも出来るかもしれませんがちょっと思いつきませんね。)

投稿2019/03/22 00:59