jsでコールバックがうまく実装できない

Question

コールバックの練習をしています。（まだpromiseなどの高度なことしていません）やりたいことは、関数Aを実行したら、関数の中でループ処理が行われ、そのループが終わったら、関数Bを実行するというものです。下記のようにコードを書いてみたのですが、ループが終わる前にコールバック関数が実行されてしまいます。ループは一回ループする毎にひと時休憩するようにしてます。どのようにすれば上記のような実装が実現できるでしょうか？

var after_callback = function() {
  console.log('log after loop');
};

// loop-timeが終わってから引数を実行する関数
var befoer_callback = function(callback) {

console.log("loop start")

var counter = 0;
var i = setInterval(function(){
  console.log("loop-time")
  counter++;
  if(counter === 10) {
      clearInterval(i);
  }
}, 200);

//コールバックを実行
befoer_callback();
};

myTurn(after_callback);
//loop start
//log after loop
//10(index):121 loop-time

Comments

[akabee]

このコードの中で、関数Aと関数Bはどれにあたりますか？また、myTurn関数の内容はどんなものですか？

Answer 1

コードが不完全で, 内容の成否を確認できませんので, シンプルなコールバック機構の実装サンプルを提示して回答に代えます.

//簡単な非同期関数
function simpleAsync(callback){
	let i = 0;
	const h = setInterval(function(){
		console.log(i);
		if(++i >= 10){
			clearInterval(h);
			callback();
		}
	}, 0);
	console.log("callback function was scheduled.");
}

function useSimpleAsync(){
	simpleAsync(function(){
		console.log("callback function was called.");
	});
}
useSimpleAsync();

このようにコールバック関数はsetInterval関数等の非同期的に呼び出される処理内から呼び出す必要があります.

Comments

[keys]

適切な回答、ありがとうございました。

Answer 2

関数Aを実行したら、関数の中でループ処理が行われ、そのループが終わったら、関数Bを実行するというものです。

こういうことですかね。

setIntervalではなく、setTimeoutの方を使ってみました。

// 関数timerが関数Aに相当
// 関数timerの引数に渡すcallbackが関数Bに相当

function timer(callback) {

	var counter = 0;
	
	setTimeout(function tick(){	

		console.log("counter", counter);
		counter++;
		if(counter >= 10) {
			return callback(null, 'done');	
		}
		
		setTimeout(tick, 200);
		
	}, 200);
	
}


timer(function(error, result) {
	if (error) {
            return console.error(error);
	}
	console.log(result);
});

> counter 0
> counter 1
> counter 2
> counter 3
> counter 4
> counter 5
> counter 6
> counter 7
> counter 8
> counter 9
> done

追記

今回、質問文に掲載されているコードが期待した順番で動かない理由は、
setIntervalが非同期実行されるためです。

setIntervalやsetTimeoutは非同期実行されるため、
同期実行されるものが先に呼ばれることになります。

以下はsetTimeoutを使った例です。

// 【非同期】遅延時間０秒でログ出力
setTimeout(function() {
	console.log('0 second delay');
}, 0);

// 【非同期】遅延時間1秒でログ出力
setTimeout(function() {
	console.log('1 second delay');
}, 1000);

// 【同期】100,000から0まで同期的にディクリメント
var count = 100000;
while(count--) {
	console.log('count down:', count);
}

//【同期】単純に'Hello'と出力
console.log('Hello');

// 出力結果：
> count down: 99999 - 同期
> count down: 99998 - 同期
> (中略) - 同期
> count down: 2 - 同期
> count down: 1 - 同期
> count down: 0 - 同期
> Hello - 同期
> 0 second delay - 非同期
> 1 second delay - 非同期