JSFiddle - React, Tailwind, and code Playground

by Alex Alex

HTML

<button id=b1>Click me 1!</button>
<button id=b2>Click me 2!</button>

JavaScript

document.querySelector('#b1').addEventListener('click', function() {
    console.log('Button 1 clicked');
    Promise.resolve().then(function() {
        console.log('Button 1 promise 1 resolved');
    }).then(function() {
        return new Promise(function(res, rej) {
            setTimeout(function() {
                res()
                console.log('Button 1 promise 2 resolved');
            }, 2000);
        })
    }).then(function() {
        console.log('Button 1 promise 3 resolved');
    });
}, false);

document.querySelector('#b2').addEventListener('click', function() {
    console.log('Button 2 clicked');
    Promise.resolve().then(function() {
        console.log('Button 2 promise 1 resolved');
    }).then(function() {
        return new Promise(function(res, rej) {
            setTimeout(function() {
                res()
                console.log('Button 2 promise 2 resolved');
            }, 4000);
        })
    }).then(function() {
        console.log('Button 2 promise 3 resolved');
    });
}, false);