Mutual Exclusion in Javascript

According to Wikipedia Mutual Exclusion means:

Mutual exclusion is a property of concurrency control, which is instituted for the purpose of preventing race conditions. It is the requirement that one thread of execution never enters its critical section at the same time that another concurrent thread of execution enters its own critical section.

Well in short it means execute only a part of the code by one thread at the same time.

Back in my Java days™️, Java had a nice simple keyword to make a method synchronized, which means mutually exclusive. Javascript doesn’t have something similar, that’s the reason I came up with this Javascript mutex implementation. It’s probably not perfect, but hey, it does the job!

This example shows how to create a function that returns a promise in which the work executes synchronized:

See Github for full source code


const data = {
    counter: 0
}

/**
 * Some heavy calculations in a promise.
 *
 * @param {number} executionSequence The index number of execution
 * @param {{counter:number}} data Wrapper object with counter
 * @return {Promise<number>} Promise that resolves on success or rejects otherwise
 */
function execute(executionSequence, data) {
    const promise = new Promise(resolve => {
        synchronized(release => {

            // Release the lock when the promise is done.
            promise.finally(release);

            // Wait a random time between 0 and 2 seconds.
            setTimeout(() => {

                data.counter++;
                console.log('Execute promise: ' + executionSequence);
                console.log('Counter: ' + data.counter);
                resolve(data.counter);

            }, Math.random() * 2 * 1000);
        });
    });
    return promise;
}

for (let i = 1; i <= 10; i++) { console.log(`==== Create promise: ${i}`); execute(i, data).then(result => {
        console.log(`Promise success: ${i}, result: ${result}`);
    })
}

 

The title image is shamefully stolen from this article:
Mollie: How to use Mutex locks responsibly

Template Literals Templating

What are Template Literals?

Template literals are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them. Template Literals are part of the ES6 specification.

Actually they even contain the basic requirements to use it as a templating language!

Continue reading “Template Literals Templating”

JavaScript Callback of Promise

Als je nu https://www.facebook.com opent, zie je dat de pagina meteen laadt. Je eigen foto linksboven is zichtbaar, de zoekbalk bovenaan het scherm en het menu aan de linkerkant. In de seconden daarna verschijnen langzaam de berichten op de tijdlijn, niet allemaal, maar alleen in het gedeelte van het scherm dat zichtbaar is. Als je nu naar beneden scrolt, zie je dat ook de oudere berichten pas op dat moment geladen worden.

Facebook laadt deze onderdelen na elkaar om er voor te zorgen dat de pagina snel zichtbaar is. Als Facebook zou wachten met het tonen van de pagina totdat alle gegevens en berichten geladen zijn, zou het zeker een aantal seconden duren voordat de Facebook pagina zichtbaar is. En volgens studies is het zo dat hoe langer het duurt dat een website laadt, hoe meer gebruikers afhaken.

Continue reading “JavaScript Callback of Promise”

Hack de ATAG One Android App

PlayStore-AtagOneApp
De ATAG One app, gemaakt door Applied Micro Electronics AME B.V.

De ATAG One app (voor iPhone en Android) benadert rechtstreeks via het locale netwerk de ATAG One thermostaat. Atag stelt helaas geen technische documentatie online beschikbaar hoe de thermostaat aan te sturen is. De enige manier om uit te vissen hoe de app “praat” met de thermostaat, is door de app te hacken 🙂

Lees verder…

AngularJS; Lege velden na reload, opgelost!

Verschrikkelijk irritant, dat na een reload van de pagina alle velden van de webapplicatie weer op de initiële waarde staan. Het is veel praktischer als ze nog steeds dezelfde waarde bevatten na de reload. Hieronder beschrijf ik hoe je dit voorelkaar krijgt in het webframework AngularJS.

Lees verder…

Fast JavaScript Click Event for Touch Devices

Click Events

When working on a web app for touch devices (iPhone / iPad), you will soon notice that click events are rather slow to fire. There is a delay due to the fact that the device waits for the user to complete a gesture before deciding that the intended gesture was in fact a click.

I wrote a simple script that detects whether the device is touched without moving. When tapped without move, it fires a custom event named “fast click”. This alternative event fires much faster then an ordinary click event.

Continue reading “Fast JavaScript Click Event for Touch Devices”

HTML 5 Accelerometer

Wat is een Accelerometer

Volgens wikipedia is een accelerometer (versnellingsmeter in het Nederlands):

Een versnellingsmeter is een meetapparaat dat een versnelling kan registreren en meten. Het maakt gebruikt van het traagheidsprincipe.

Tegenwoordig is bijna elke smartphone uitgerust met een accelerometer. Met de accelerometer is het mogelijk de rotatie digitaal uit te lezen.

Lees verder…

Mockup m.b.v. jQuery Mobile

screenshot-jquery-mobile

Wat is jQuery Mobile

De makers van jQuery werken sinds een paar maanden aan jQuery Mobile.

“It’s a framework built on top of jQuery that provides a range of user interface elements and features for you to use in your mobile apps. jQuery Mobile uses the very best HTML 5 and CSS 3 features to provide the best possible experience in the most-capable browsers.”

Afgelopen jaar, op 12 november 2010 hebben de mannen van jQuery Mobile een tweede alfa versie uitgebracht – jQuery Mobile Alpha 2.

Lees verder…