Bdtjtk

I try to handle the return of promise in order to get a blocking behavior when I call the asyncFunc defined in the code snippet below. In this function, I am using a webworker.

I am not an expert in javascript and the concept of promise is new for me. I tried to define an asyncFunc function into the block of my code.
If I call this function after, I should normally have the code inside asyncFunc completely executed (but I am not sure).

The goal is to draw in a canvas (which is currently representing the gameboard) once webworker has received the array to draw(HitCurrentvariable) here, i.e in a synchronous way (drawing function is performed by displayCurrentHit(HitCurrent);)

else if (mode == 'computer') {

    // Call asynchronous function with promise

    function asyncFunc(HitCurrent) {

        // Return promise

        return new Promise( resolve => {

            // Creation of webworker

            let firstWorker = new Worker(workerScript);

            firstWorker.onmessage = function (event) {

                resolve(event.data);

            }   

            // Post current copy of HitCurrent, i.e HitCurrent

            firstWorker.postMessage([HitCurrent, HitCurrent.playerCurrent, maxNodes]);

        }).then(({result}) => {

            // Get back game board of webworker

            HitCurrent = result.HitResult;

            // Get back suggested hit computed by webworker

            [a,b] = HitCurrent.coordPlayable;

            console.log('Into promise : coordPlayable : (a,b) = ',a,b);

            // Drawing all lines from suggested hit (in 8 directions)

            for (k = 0; k < 8; k++) {

               exploreHitLine(HitCurrent, a, b, k, 'drawing');

            }   

            // Remove playable hits

            cleanHits('playable', HitCurrent);

            // Display current game

            displayCurrentHit(HitCurrent);

            // Up to there, first computer hit is good 

            // and game board is well drawn

            alert('Stop just after displayCurrentHit');

        })

    } 

    // Call asyncFunc : blocking ???

    asyncFunc(HitCurrent).then(console.log('Call async function'));

    // Prove asynchronuous of asyncFunc call

    alert('after asynFunc().then');

}

The call of asyncFunc is not blocking . If someone could give a method to display current gameboard in a synchronous way using Promise concept ?

Regards

You have a wrong syntax resolving your promise.

.then accepts a function callback within, called when the promise will be resolved.

So in your case this code:

// Call asyncFunc : blocking ???

asyncFunc(HitCurrent).then(console.log('Call async function'));

// Prove asynchronuous of asyncFunc call

alert('after asynFunc().then');

Should be:

asyncFunc(HitCurrent).then(() => alert('after asynFunc()'));

Instead in order to write your code in a "sync way", you can use async/await in this way:

function asyncFunc(HitCurrent) {

  // Return promise

  return new Promise(resolve => {

    setTimeout(() => resolve('finished'), 1000);

  }).then(data => {

    alert('promise resolved:' + data);

  })

}



(async () => {

  await asyncFunc();

  alert('after asynFunc().then');

})();

So you create an async function which awaits for the resolution of your promise and then alerts the values.