JavaScript Promises: the execution of then() functions is not synchronous

Question

JavaScript Promises: the execution of then() functions is not synchronous

I seem to be making a mistake and I need some assistance in figuring out what it is.

Here is a simplified version of the code causing the issue:

function testTimer(time, msg,resolve){
console.log(arguments.callee.name);
window.setTimeout(
                function() {
                    console.log("MSG:", msg);
                    if(resolve !== undefined)
                        resolve(1);
                }, time * 1000);
}

new Promise(function(resolve, reject) {
    testTimer(1, 'ONE', resolve);
}).then(function(resolved){testTimer(9, 'TWO');}, function(rejected){alert("Rejected!", reject)})
.then(function(resolved){testTimer(1, 'THREE'); }, function(rejected){alert("Rejected!", reject)});

The expected output should be:

ONE
TWO
THREE

However, due to the different execution times of the two 'then' functions, I get:

ONE
THREE
TWO

My question is simple: How can I make the 'then' functions wait for each other?

Thank you for your help!

javascript ecmascript-6

Answer 1

Answer №1

To ensure the function returns a promise only after the timeout has elapsed, you must follow this approach:

function timerTest(duration, message, resolve) {
    console.log(arguments.callee.name);
    window.setTimeout(function() {
        console.log("MESSAGE:", message);
        if(resolve !== undefined) {
            resolve(1);
        }
    }, duration * 1000);
}

new Promise(function(resolve, reject) {
        timerTest(1, 'ONE', resolve);
    }).then(
        function(resolved){
            // a promise is returned here, resolved by timerTest function
            // note that a resolve function is passed into it
            return new Promise(function(resolve) {
                timerTest(9, 'TWO', resolve);
            });
        },
        function(rejected){
            alert("Rejected!", reject)
        }
    )
    .then(
        function(resolved){timerTest(1, 'THREE'); },
        function(rejected){alert("Rejected!", reject)}
    );

Explanation of how it operates: The timerTest function, as defined, takes a callback as the third argument to be executed after the timer expires. This callback resolves a nested promise created in the second step, ensuring the third step only occurs after the second one has been resolved by the timer. This maintains the expected order of execution.

Answer 2

To ensure the function returns a promise only after the timeout has elapsed, you must follow this approach:

function timerTest(duration, message, resolve) {
    console.log(arguments.callee.name);
    window.setTimeout(function() {
        console.log("MESSAGE:", message);
        if(resolve !== undefined) {
            resolve(1);
        }
    }, duration * 1000);
}

new Promise(function(resolve, reject) {
        timerTest(1, 'ONE', resolve);
    }).then(
        function(resolved){
            // a promise is returned here, resolved by timerTest function
            // note that a resolve function is passed into it
            return new Promise(function(resolve) {
                timerTest(9, 'TWO', resolve);
            });
        },
        function(rejected){
            alert("Rejected!", reject)
        }
    )
    .then(
        function(resolved){timerTest(1, 'THREE'); },
        function(rejected){alert("Rejected!", reject)}
    );

Explanation of how it operates: The timerTest function, as defined, takes a callback as the third argument to be executed after the timer expires. This callback resolves a nested promise created in the second step, ensuring the third step only occurs after the second one has been resolved by the timer. This maintains the expected order of execution.

JavaScript Promises: the execution of then() functions is not synchronous

Answer №1

Similar questions

How can I utilize a variable in a v-for loop as a label for a q-btn in Vue.js?

(Javascript - Arrays) Find the leftmost and rightmost connected characters

Tips for distinguishing between 1 and 1.00 as equal, and 1.01 as not equal in Angular

Sending client-side data from app.js to specific components using NextJS

Engage with and rearrange JSON data

"Automate the process of manual content duplication with JavaScript's for each replacement

Is it possible to enable a button as soon as input is entered?

Differences between Cypress and JQuery objects, and the significance of the cy.wrap function

Guide to importing a JavaScript module as any type without using a declaration file (d.ts)

Having issues with JavaScript function returning value from Ajax request

Error: Cannot access the 'top' property of an undefined object

Create a new array in JavaScript by comparing and finding the differences between two existing arrays

Error: Unexpected syntax error in JSON parsing after importing PHP file

Create a list that starts with a header determined by an object's attribute within an array

Form an item using an array

My JavaScript if-else statement isn't functioning properly

Failure to display updated property value

Instructions on converting XML data obtained from an AJAX call into a downloadable file

Building an array of objects using a foreach loop

How can I activate the socket.io connection event in NodeJS?