자바스크립트에서 비동기/동기 처리 전환하기

비동기로 되어 있는 코드를 동기처리로 변경 시, syncExecutor 함수를 만들어서 처리

• 비동기로 처리 할 작업생성코드, 처리할 작업의 함수참조가 배열형태로 저장되어 있다고 가정한다.

function generateCommands() {
    var commands = [];
    for(var i=0; i < 5; i++) {
        let seq = i;
        commands[i] = function() {
            var def = $.Deferred();
            setTimeout(()=>{
                console.log(seq);
                def.resolve(seq);
            }, Math.floor(Math.random() * seq) * 2 * 1000);
            return def;
        };
    }
    return commands;
}

• 비동기로 실행코드

var commands = generateCommands();
$.when(...commands.map(f=>f())).done(function() {
  	var results = Array.from(arguments); //result array
	console.log("ASYNC");
});  

//CONSOLE
//0
//1
//4
//2
//3
//ASYNC

• 동기로 실행코드

var commands = generateCommands();
syncExecutor(commands, ()=>console.log("SYNC"));

//CONSOLE
//0
//1
//2
//3
//4
//SYNC

function syncExecutor(commands, callback, index=0) {
    $.when(commands[index]()).done(result=>{
        index++;
        if (commands.length == index) {
            callback();
        } else {
            syncExecutor(commands, callback, index);
        }
    });
}