JavaScriptで超簡単な同期処理の方法の続き

JavaScriptで超簡単な同期処理の方法の続き:

前回の投稿はコチラ
https://qiita.com/Masato_Nakatsuji/items/5dd64dc74115b52a83dd

以前、JavaScriptの同期処理の方法を書きましたが

ループ処理の場合には別途対応が必要になってきたのでそれを補足します

前回までは...

下記のようなオブジェクトを用意して

var sync={ 
    __checked:0, 
    next:function(){ 
        this.__checked=0; 
    }, 
    start:function(callback=function(){}){ 
        var syncs=this; 
        var uss=setInterval(function(){ 
            if(!syncs.__checked){ 
                clearInterval(uss); 
                syncs.__checked=1; 
                callback(); 
            } 
        },5); 
    }, 
}; 

あとはひたすらsync.startとsync.nextを順に続けていく、という形でした。

sync.start(function(){ 
 
    console.log("1です"); 
 
    setTimeout(function(){ 
        sync.next(); 
    },1000); 
}); 
sync.start(function(){ 
 
    console.log("2です"); 
 
    setTimeout(function(){ 
        sync.next(); 
    },1000); 
}); 
 

for等のループの場合

ではfor等のループ処理の場合はどうなるかというと..

for(var u1=0;u1<5;u1++){ 
    sync.start(function(){ 
        setTimeout(function(){ 
            console.log(u1+"です"); 
            sync.next(); 
        },1000); 
    }); 
} 

とすると、これアウトです。

実際Node.jsから実行してコンソールで確認してみてください

5です 
5です 
5です 
5です 
5です 

こんな感じになります。

全部5になってしまいました..orz

それもそのはず、

forループが優先的に先行して進んでしまった為、

最終的にインデックス用の変数u1は5にたどり着いてしまいます。

それを後で拾っているわけですから

ではどうすればよいかというと、

要はループ時にsync.startに直接インデックス値を渡せる形にするという方法があります。

syncのオブジェクトのコードを..

var sync={ 
    __checked:0, 
    next:function(){ 
        this.__checked=0; 
    }, 
    start:function(callback=function(){},index=null){ 
        var syncs=this; 
        var uss=setInterval(function(){ 
            if(!syncs.__checked){ 
                clearInterval(uss); 
                syncs.__checked=1; 
                if(index==null){ 
                    callback(); 
                } 
                else 
                { 
                    callback(index); 
                } 
            } 
        },5); 
    }, 
    loop:function(index,callback=function(){}){ 
        this.start(callback); 
    }, 
}; 

として、ループ時用に２番目の引数にインデックス値を渡せれる仕様にしてあげればいいだけです。

for(var u1=0;u1<5;u1++){ 
    sync.start(function(index){ 
        setTimeout(function(){ 
            console.log(index+"だよ"); 
            sync.next(); 
        },1000); 
    },u1); 
} 

これで順番通りに数字がカウントされるはずです。