トップ JavaScriptに関する質問複数の関数を時間差で実行してさらに繰り返す方法

編集履歴

回答編集履歴

2018/05/17 10:04

投稿

スコア2415

answer CHANGED Viewed

@@ -43,10 +43,6 @@
 	}
 }
-const tasks = [asyncOrderDrink, asyncPayBill, asyncDrinkCoffee];
-const tasksGenerator = makeLoopGenerator(tasks);
 function runLoop(generator) {
 	function loop() {
 		generator.next().value.then(loop);
@@ -54,7 +50,9 @@
 	loop();
 }
-runLoop(tasksGenerator)
+runLoop(
+	makeLoopGenerator([asyncOrderDrink, asyncPayBill, asyncDrinkCoffee])
+);
 ```

runLoop(makeLoopGenerator(...funcs))

2018/05/17 10:04

投稿

HayatoKamono

スコア2415

answer CHANGED Viewed

@@ -189,10 +189,7 @@
 				makeThunk(changeText, 'WORLD', containerB)
 			];
-			const generator = makeLoopGenerator(...funcs);
+			runLoop(makeLoopGenerator(...funcs));
-			runLoop(generator)
 		}
 		return {

setTimeout(runLoop, 1000, generator);

2018/05/17 06:16

投稿

HayatoKamono

スコア2415

answer CHANGED Viewed

@@ -173,7 +173,7 @@
 		function runLoop(generator) {
 			generator.next();
-			setTimeout(runLoop.bind(null, generator), 1000)
+			setTimeout(runLoop, 1000, generator);
 		}
 		function init() {

これで編集完了

2018/05/17 06:12

投稿

HayatoKamono

スコア2415

answer CHANGED Viewed

@@ -147,59 +147,61 @@
 ```
 (function(global, document) {
+	function makeThunk(func, ...rest) {
+		return function() {
+			return func(...rest);
+		}
+	}
-    const app = (function() {
+	const app = (function() {
-        function changeClassName(className, element) {
+		function changeClassName(className, element) {
-            return function() {
-                element.className = className;
+			element.className = className;
-            }
+		}
-        }
-        function changeText(value, element) {
+		function changeText(value, element) {
-            return function() {
-                element.textContent = value;
+			element.textContent = value;
-            }
+		}
-        }
-        function* makeLoopGenerator(...funcs) {
+		function* makeLoopGenerator(...funcs) {
-            while(true) {
+			while(true) {
-                for (let func of funcs) {
+				for (let func of funcs) {
-                    yield func();
+					yield func();
-                }
+				}
-            }
+			}
-        }
+		}
-        function runLoop(generator) {
+		function runLoop(generator) {
-            generator.next();
+			generator.next();
-            setTimeout(runLoop.bind(null, generator), 1000)
+			setTimeout(runLoop.bind(null, generator), 1000)
-        }
+		}
-        function init() {
+		function init() {
-            const containerA = document.getElementById('containerA');
+			const containerA = document.getElementById('containerA');
-            const containerB = document.getElementById('containerB');
+			const containerB = document.getElementById('containerB');
-            const funcs = [
+			const funcs = [
-                changeClassName('spring', containerA),
+				makeThunk(changeClassName, 'spring', containerA),
-                changeClassName('summer', containerA),
+				makeThunk(changeClassName, 'summer', containerA),
-                changeText('HELLO', containerB),
+				makeThunk(changeText, 'HELLO', containerB),
-                changeClassName('autumn', containerA),
+				makeThunk(changeClassName, 'autumn', containerA),
-                changeClassName('winter', containerA),
+				makeThunk(changeClassName, 'winter', containerA),
-                changeText('WORLD', containerB)
+				makeThunk(changeText, 'WORLD', containerB)
-            ];
+			];
-            const generator = makeLoopGenerator(...funcs);
+			const generator = makeLoopGenerator(...funcs);
-            runLoop(generator)
+			runLoop(generator)
-        }
+		}
-        return {
+		return {
-            init: init
+			init: init
-        }
+		}
-    })();
+	})();
-    document.addEventListener('DOMContentLoaded', app.init);
+	document.addEventListener('DOMContentLoaded', app.init);
 })(window, document);

これにて編集終了

2018/05/17 03:30

投稿

HayatoKamono

スコア2415

answer CHANGED Viewed

@@ -106,7 +106,7 @@
 ![イメージ説明](8f8da0e073fe063f47696d8c5e07a73b.gif)
 -> [animationGifで再生](https://teratail.storage.googleapis.com/uploads/contributed_images/8f8da0e073fe063f47696d8c5e07a73b.gif)
-質問者さんの[前回の質問](https://teratail.com/questions/126488)の場合は、一定間隔で複数の(異なる)処理を実行させたいというものだったので、`Promise`を使わずに単に、`setTimeout()`関数で定期実行させてあげるだけで良いかと思います。
+質問者さんの[前回の質問](https://teratail.com/questions/126488)の場合は、「一定間隔」で複数の(異なる)処理を実行させたいというものだったので、`Promise`を使わずに単に、`setTimeout()`関数で定期実行させてあげるだけで良いかと思います。
 以下、[前回の質問](https://teratail.com/questions/126488)の「異なる複数の処理」に対応したコードです。
@@ -146,66 +146,62 @@
 ## JavaScript
 ```
 (function(global, document) {
-	const app = (function() {
-		function changeClassName(value) {
-			return function(element) {
-				return function() {
-					element.className = value;
-				}
-			}
-		}
-		function changeText(value) {
-			return function(element) {
-				return function() {
+    const app = (function() {
-					element.textContent = value;
-				}
-			}
-		}
-		function* makeLoopGenerator(...funcs) {
+        function changeClassName(className, element) {
-			while(true) {
-				for (let func of funcs) {
+            return function() {
-					yield func();
+                element.className = className;
-				}
+            }
-			}
+        }
-		}
-		function loop(generator) {
-			generator.next();
-			setTimeout(loop.bind(null, generator), 1000)
-		}
-		function init() {
-			const containerA = document.getElementById('containerA');
-			const containerB = document.getElementById('containerB');
-			const funcs = [
-				changeClassName('spring')(containerA),
-				changeClassName('summer')(containerA),
-				changeText('HELLO')(containerB),
-				changeClassName('autumn')(containerA),
-				changeClassName('winter')(containerA),
-				changeText('WORLD')(containerB),
-			];
-			const generator = makeLoopGenerator(...funcs);
+        function changeText(value, element) {
-			loop(generator)
+            return function() {
+                element.textContent = value;
-		}
+            }
-		return {
-			init: init
-		}
+        }
-	})();
-	document.addEventListener('DOMContentLoaded', app.init);
+        function* makeLoopGenerator(...funcs) {
+            while(true) {
+                for (let func of funcs) {
+                    yield func();
+                }
+            }
+        }
+        function runLoop(generator) {
+            generator.next();
+            setTimeout(runLoop.bind(null, generator), 1000)
+        }
+        function init() {
+            const containerA = document.getElementById('containerA');
+            const containerB = document.getElementById('containerB');
+            const funcs = [
+                changeClassName('spring', containerA),
+                changeClassName('summer', containerA),
+                changeText('HELLO', containerB),
+                changeClassName('autumn', containerA),
+                changeClassName('winter', containerA),
+                changeText('WORLD', containerB)
+            ];
+            const generator = makeLoopGenerator(...funcs);
+            runLoop(generator)
+        }
+        return {
+            init: init
+        }
+    })();
+    document.addEventListener('DOMContentLoaded', app.init);
 })(window, document);
 ```
@@ -213,10 +209,7 @@
 回答に載せたコードでもエラー対応をするためのコードは省略していますが、エラーが発生する可能性があるのであれば、`new Promise()`に渡すコールバック関数内で、非同期処理が失敗した時に`reject()`が実行されるようにコードを書いてあげる必要があります。
-# 補足
-※ 一応動作確認をしてからコードを載せていますが、荒く書いているのでおかしいところがあるかもしれません。ご了承ください。。。(あとで修正・補足などするかもしれません）
 # 参考
 掲載コードの中で`generator`、`spread syntax`、`rest parameters`を使っていますが、詳細やブラウザ対応状況は以下でご確認ください。(英語記事へのリンクになっていますが、リンク先ページで言語切り替えが可能です。)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

2018/05/17 03:09

投稿

HayatoKamono

スコア2415

answer CHANGED Viewed

@@ -218,7 +218,8 @@
 ※ 一応動作確認をしてからコードを載せていますが、荒く書いているのでおかしいところがあるかもしれません。ご了承ください。。。(あとで修正・補足などするかもしれません）
 # 参考
-掲載コードの中で`generator`と`rest parameters`を使っていますが、ブラウザ対応状況は以下でご確認ください。(英語記事へのリンクになっていますが、時間ある時に日本語ページへリンクを変えると思います。)
+掲載コードの中で`generator`、`spread syntax`、`rest parameters`を使っていますが、詳細やブラウザ対応状況は以下でご確認ください。(英語記事へのリンクになっていますが、リンク先ページで言語切り替えが可能です。)
 - [Generator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator)
+- [Spread Syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax)
 - [Rest Parameters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters)

質問への個別回答を追記

2018/05/17 02:33

投稿

HayatoKamono

スコア2415

answer CHANGED Viewed

@@ -1,3 +1,9 @@
+# Q1. 「時間差で実行、さらに繰り返し」処理を行うには？
+とりあえず、`Promise`を使う前提で書いて見たコードが以下となります。
+## Pattern A
 ![イメージ説明](33a9321d33c19a67225b30098105d4b9.gif)
 → [animationGifで再生 ](https://teratail.storage.googleapis.com/uploads/contributed_images/33a9321d33c19a67225b30098105d4b9.gif)
@@ -53,7 +59,7 @@
 ```
-# 追記
+# Pattern B(追記)
 質問者さんの前回の質問を見る限りでは、単に時間差で複数の同期処理を実行させたいように見受けられるので、`maisumakun`さんの回答にあるように`sleep`関数のようなものを作って、各同期処理の前で実行してあげるのが良さそうです。
@@ -92,4 +98,127 @@
 runLoop(makeLoopGenerator())
 ```
-※ 追記のコードも最初のコードのように、ループ内で実行させたい関数が可変の場合でも対応できるようにしたかったですが、時間切れの為、非対応としました。
+※ 追記のコードも最初のコードのように、ループ内で実行させたい関数が可変の場合でも対応できるようにしたかったですが、時間切れの為、非対応としました。
+# Q2. Promiseで処理をする選択は良いのか？
+![イメージ説明](8f8da0e073fe063f47696d8c5e07a73b.gif)
+-> [animationGifで再生](https://teratail.storage.googleapis.com/uploads/contributed_images/8f8da0e073fe063f47696d8c5e07a73b.gif)
+質問者さんの[前回の質問](https://teratail.com/questions/126488)の場合は、一定間隔で複数の(異なる)処理を実行させたいというものだったので、`Promise`を使わずに単に、`setTimeout()`関数で定期実行させてあげるだけで良いかと思います。
+以下、[前回の質問](https://teratail.com/questions/126488)の「異なる複数の処理」に対応したコードです。
+以下を1000秒毎に実行
+- 背景色を変える関数を実行
+- 背景色を変える関数を実行
+- テキストを変える関数を実行
+ - 背景色を変える関数を実行
+- 背景色を変える関数を実行
+- テキストを変える関数を実行
+- 上記の繰り返し
+## html
+```
+<div id="containerA" class="spring"></div>
+<div id="containerB">-----</div>
+```
+## CSS
+```
+#containerA { width: 100px; height: 100px; }
+#containerB {
+  width: 100px;
+  background: gray;
+  font-size: 20px;
+  text-align: center;
+}
+.spring { background-color: pink; }
+.summer { background-color: red;  }
+.autumn { background-color: brown; }
+.winter { background-color: blue; }
+```
+## JavaScript
+```
+(function(global, document) {
+	const app = (function() {
+		function changeClassName(value) {
+			return function(element) {
+				return function() {
+					element.className = value;
+				}
+			}
+		}
+		function changeText(value) {
+			return function(element) {
+				return function() {
+					element.textContent = value;
+				}
+			}
+		}
+		function* makeLoopGenerator(...funcs) {
+			while(true) {
+				for (let func of funcs) {
+					yield func();
+				}
+			}
+		}
+		function loop(generator) {
+			generator.next();
+			setTimeout(loop.bind(null, generator), 1000)
+		}
+		function init() {
+			const containerA = document.getElementById('containerA');
+			const containerB = document.getElementById('containerB');
+			const funcs = [
+				changeClassName('spring')(containerA),
+				changeClassName('summer')(containerA),
+				changeText('HELLO')(containerB),
+				changeClassName('autumn')(containerA),
+				changeClassName('winter')(containerA),
+				changeText('WORLD')(containerB),
+			];
+			const generator = makeLoopGenerator(...funcs);
+			loop(generator)
+		}
+		return {
+			init: init
+		}
+	})();
+	document.addEventListener('DOMContentLoaded', app.init);
+})(window, document);
+```
+# Q3. そもそも私のPromiseの記述に誤りが無いか、もしくはもっと良い記述があればご指摘いただけると助かります
+回答に載せたコードでもエラー対応をするためのコードは省略していますが、エラーが発生する可能性があるのであれば、`new Promise()`に渡すコールバック関数内で、非同期処理が失敗した時に`reject()`が実行されるようにコードを書いてあげる必要があります。
+# 補足
+※ 一応動作確認をしてからコードを載せていますが、荒く書いているのでおかしいところがあるかもしれません。ご了承ください。。。(あとで修正・補足などするかもしれません）
+# 参考
+掲載コードの中で`generator`と`rest parameters`を使っていますが、ブラウザ対応状況は以下でご確認ください。(英語記事へのリンクになっていますが、時間ある時に日本語ページへリンクを変えると思います。)
+- [Generator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator)
+- [Rest Parameters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters)

makeLoopGenerator

2018/05/17 02:30

投稿

HayatoKamono

スコア2415

answer CHANGED Viewed

@@ -78,7 +78,7 @@
 	loop();
 }
-function* generatorFn() {
+function* makeLoopGenerator() {
 	while(true) {
 		yield sleep(1000);
 		orderCoffee('コーヒーを注文する');
@@ -89,7 +89,7 @@
 	}
 }
-runLoop(generatorFn())
+runLoop(makeLoopGenerator())
 ```
 ※ 追記のコードも最初のコードのように、ループ内で実行させたい関数が可変の場合でも対応できるようにしたかったですが、時間切れの為、非対応としました。

https://teratail.storage.googleapis.com/uploads/contributed_images/33a9321d33c19a67225b30098105d4b9.

2018/05/17 01:51

投稿

HayatoKamono

スコア2415

answer CHANGED Viewed

@@ -1,64 +1,58 @@
-![イメージ説明](8d64f96d231388f602f7a4ab286fc3ad.gif)
+![イメージ説明](33a9321d33c19a67225b30098105d4b9.gif)
-[→ アニメーションGifで再生](https://teratail.storage.googleapis.com/uploads/contributed_images/8d64f96d231388f602f7a4ab286fc3ad.gif)
+→ [animationGifで再生 ](https://teratail.storage.googleapis.com/uploads/contributed_images/33a9321d33c19a67225b30098105d4b9.gif)
 ```
-const asyncDrink = () => {
+const asyncOrderDrink = () => {
-	return new Promise((resolve, reject) => {
+	return new Promise(resolve => {
 		setTimeout(() => {
-			console.log('drink')
+			console.log('コーヒーを注文する')
-			resolve('drink');
+			resolve();
 		}, 1000)
 	});
 }
-const asyncEat = () => {
+const asyncPayBill = () => {
-	return new Promise((resolve, reject) => {
+	return new Promise(resolve => {
 		setTimeout(() => {
-			console.log('eat')
+			console.log('料金を支払う')
-			resolve('eat');
+			resolve();
 		}, 2000)
 	});
 }
-const asyncSleep = () => {
+const asyncDrinkCoffee = () => {
-	return new Promise((resolve, reject) => {
+	return new Promise(resolve => {
 		setTimeout(() => {
-			console.log('sleep')
+			console.log('コーヒーを飲む')
-			resolve('sleep');
+			resolve();
 		}, 3000)
 	});
 }
-const funcs = [asyncDrink, asyncEat, asyncSleep];
-function generatorFn(fns) {
+function* makeLoopGenerator (fns) {
-	return function* () {
-		while(true) {
+	while(true) {
-			for (var fn of fns) {
+		for (var fn of fns) {
-				yield fn();
+			yield fn();
-			}
 		}
 	}
 }
-const g = generatorFn(funcs)();
+const tasks = [asyncOrderDrink, asyncPayBill, asyncDrinkCoffee];
+const tasksGenerator = makeLoopGenerator(tasks);
-function loop(gen) {
+function runLoop(generator) {
-	function _loop() {
+	function loop() {
-		gen.next().value.then(v => _loop());
+		generator.next().value.then(loop);
 	}
-	_loop();
+	loop();
 }
-loop(g)
+runLoop(tasksGenerator)
 ```
-とりあえず一旦、雑なコードですが置いておきます。
-あとで時間のある時に修正・補足等加えると思います。
 # 追記
 質問者さんの前回の質問を見る限りでは、単に時間差で複数の同期処理を実行させたいように見受けられるので、`maisumakun`さんの回答にあるように`sleep`関数のようなものを作って、各同期処理の前で実行してあげるのが良さそうです。
@@ -68,10 +62,8 @@
 ```
 const sleep = (delay) => {
-	return new Promise((resolve, reject) => {
+	return new Promise((resolve) => {
-		setTimeout(() => {
+		setTimeout(resolve, delay)
-			resolve();
-		}, delay)
 	});
 }
@@ -81,7 +73,7 @@
 function runLoop(gen) {
 	function loop() {
-		gen.next().value.then(v => loop());
+		gen.next().value.then(loop);
 	}
 	loop();
 }
@@ -98,4 +90,6 @@
 }
 runLoop(generatorFn())
-```
+```
+※ 追記のコードも最初のコードのように、ループ内で実行させたい関数が可変の場合でも対応できるようにしたかったですが、時間切れの為、非対応としました。

2018/05/17 01:49

投稿

HayatoKamono

スコア2415

answer CHANGED Viewed

@@ -86,7 +86,7 @@
 	loop();
 }
-function* generatorFn(list) {
+function* generatorFn() {
 	while(true) {
 		yield sleep(1000);
 		orderCoffee('コーヒーを注文する');

2018/05/17 01:20

投稿

HayatoKamono

スコア2415

answer CHANGED Viewed

@@ -89,11 +89,11 @@
 function* generatorFn(list) {
 	while(true) {
 		yield sleep(1000);
-		orderCoffee('チャイティーラテ');
+		orderCoffee('コーヒーを注文する');
 		yield sleep(2000);
-		payBill('480円');
+		payBill('料金を支払う');
 		yield sleep(3000);
-		drinkCoffee('50ml');
+		drinkCoffee('コーヒーを飲む');
 	}
 }

2018/05/17 01:16

投稿

HayatoKamono

スコア2415

answer CHANGED Viewed

@@ -61,10 +61,11 @@
 # 追記
-質問者さんの前回の質問を見る限りでは、単に時間差で複数の同期処理を実行させたいように見受けられるので、`maisuma-kun`さんの回答にあるように`sleep`関数のようなものを作って、各同期処理の前で実行してあげるのが良さそうです。
+質問者さんの前回の質問を見る限りでは、単に時間差で複数の同期処理を実行させたいように見受けられるので、`maisumakun`さんの回答にあるように`sleep`関数のようなものを作って、各同期処理の前で実行してあげるのが良さそうです。
-ということで、`maisuma-kun`さんの回答を参考に以下、`generator`版のコードを追加。
+ということで、`maisumakun`さんの回答を参考に以下、`generator`版のコードを追加。
 ```
 const sleep = (delay) => {
 	return new Promise((resolve, reject) => {

2018/05/17 01:11

投稿

HayatoKamono

スコア2415

answer CHANGED Viewed

@@ -56,4 +56,45 @@
 ```
 とりあえず一旦、雑なコードですが置いておきます。
-あとで時間のある時に修正・補足等加えると思います。
+あとで時間のある時に修正・補足等加えると思います。
+# 追記
+質問者さんの前回の質問を見る限りでは、単に時間差で複数の同期処理を実行させたいように見受けられるので、`maisuma-kun`さんの回答にあるように`sleep`関数のようなものを作って、各同期処理の前で実行してあげるのが良さそうです。
+ということで、`maisuma-kun`さんの回答を参考に以下、`generator`版のコードを追加。
+```
+const sleep = (delay) => {
+	return new Promise((resolve, reject) => {
+		setTimeout(() => {
+			resolve();
+		}, delay)
+	});
+}
+const orderCoffee = (v) => console.log(v);
+const payBill = (v) => console.log(v);
+const drinkCoffee = (v) => console.log(v);
+function runLoop(gen) {
+	function loop() {
+		gen.next().value.then(v => loop());
+	}
+	loop();
+}
+function* generatorFn(list) {
+	while(true) {
+		yield sleep(1000);
+		orderCoffee('チャイティーラテ');
+		yield sleep(2000);
+		payBill('480円');
+		yield sleep(3000);
+		drinkCoffee('50ml');
+	}
+}
+runLoop(generatorFn())
+```

2018/05/17 01:09

投稿

HayatoKamono

スコア2415

answer CHANGED Viewed

@@ -1,5 +1,5 @@
 ![イメージ説明](8d64f96d231388f602f7a4ab286fc3ad.gif)
-※アニメーションGif
+[→ アニメーションGifで再生](https://teratail.storage.googleapis.com/uploads/contributed_images/8d64f96d231388f602f7a4ab286fc3ad.gif)
 ```
 const asyncDrink = () => {
@@ -56,4 +56,4 @@
 ```
 とりあえず一旦、雑なコードですが置いておきます。
-あとで修正・補足等加えると思います。
+あとで時間のある時に修正・補足等加えると思います。