synchronized-limited-count.js

import { Mutex, Semaphore } from 'async-mutex';
import material from 'materialize-css/dist/js/materialize';

let count = 0;
let clientLock = new Mutex();
let clientSempahore = new Semaphore(2);

// Server Simulation
function processCommand() {
    count += 1;
    return count;
}

// Network Delay Simulation
async function serverDelay() {
    return new Promise(resolve => setTimeout(resolve, parseInt(Math.random() * 500)));
}

window.addEventListener('load', () => {
    document.getElementById("genToast").addEventListener('click', async () => {
        let release = await clientLock.acquire();
        await serverDelay();
        let number = processCommand()
        await serverDelay();
        
        let [semNumber, releaseSemaphore] = await clientSempahore.acquire();
        material.toast({
            html: `<span style="font-size: 48px; padding: 2rem;">#${number}</span>`,
            displayLength: 1000,
            completeCallback: () => releaseSemaphore()
        });

        release();
    })
})