[Javascript] Exécuter un événement qui se déclenche plusieurs fois de suite seulement après un certain délais en temps (un timeout)

10/08/2022 / admin

Nouvelle méthode (tips: utilisez celle-ci)

Source: Debouncing and Throttling in JavaScript

Version PDF: Debouncing and Throttling in JavaScript

Ancienne méthode

…et en fait j’ai jamais réussi à la faire fonctionner.

Source: How to respond to a Javascript event only if it is fired once and then not fired again during some time period?, Debouncing Javascript Methods

Problème:

In my application I listen to the Google Maps API ‘bounds_changed’ event to send an ajax request to update some div on the web page depending on the new boundaries of the map:

google.maps.event.addListener(map, 'idle', function() {
  // here goes an ajax call
}

google.maps.event.addListener(map, 'idle', function() {

// here goes an ajax call

}

The event ‘idle’ is fired with a high frequency when the user drag the map around. So much that there are too many ajax requests sent to the server.

Basically I would like to make the function to be executed only after the user has stopped to move the map during some time period (for example 500ms).

Solution

    function debounce(func, threshold, execAsap) {

        var timeout;

        return function debounced () {
            var obj = this, args = arguments;
            function delayed () {
                if (!execAsap)
                    func.apply(obj, args);
                timeout = null;
            };

            if (timeout)
                clearTimeout(timeout);
            else if (execAsap)
                func.apply(obj, args);

            timeout = setTimeout(delayed, threshold || 100);
        };

    }

function debounce(func, threshold, execAsap) {

var timeout;

return function debounced () {

var obj = this, args = arguments;

function delayed () {

if (!execAsap)

func.apply(obj, args);

timeout = null;

};

if (timeout)

clearTimeout(timeout);

else if (execAsap)

func.apply(obj, args);

timeout = setTimeout(delayed, threshold || 100);

};

}

A l’addListener pour l’événement idle de l’API Google Maps, on déclare une fonction qui contiendra juste notre appel à la fonction debounce:

google.maps.event.addListener(mapApi.mapObj, 'idle', topic_onIdleDebounce);

1	google.maps.event.addListener(mapApi.mapObj, 'idle', topic_onIdleDebounce);

    function topic_onIdleDebounce() {
        console.log('%c [topic_onIdleDebounce]', 'background: tomato');

        debounce(topic_onIdle(), 300, true);
    }

function topic_onIdleDebounce() {

console.log('%c [topic_onIdleDebounce]', 'background: tomato');

debounce(topic_onIdle(), 300, true);

}

    function topic_onIdle() {
        console.log('%c [topic_onIdle]', 'background: tomato');
        
        // Tout le code à exécuter une fois que l'événement idle s'est déclenché pour la dernière fois dans les limites du timeout (300) défini dans notre fonction topic_onIdleDebounce
    }

function topic_onIdle() {

console.log('%c [topic_onIdle]', 'background: tomato');

// Tout le code à exécuter une fois que l'événement idle s'est déclenché pour la dernière fois dans les limites du timeout (300) défini dans notre fonction topic_onIdleDebounce

}

[Javascript] Utiliser l’API de Géolocalisation avec des promesses ou Async Await

29/07/2022 / admin

Source: un billet clair, concis et efficace: How to use Geolocation API with Promises

Avec une promesse:

function getPosition(options) {
    return new Promise(function(resolve, reject) { 
        navigator.geolocation.getCurrentPosition(resolve, reject, options)
    });
}

function getPosition(options) {

return new Promise(function(resolve, reject) {

navigator.geolocation.getCurrentPosition(resolve, reject, options)

});

}

getPosition(options)
  .then((position) => {
    console.log(position);
  })
  .catch((err) => {
    console.error(err.message);
  });

getPosition(options)

.then((position) => {

console.log(position);

})

.catch((err) => {

console.error(err.message);

});

Avec `async`, `await`:

try {
    const position = await getPosition(options);
    console.log(position);
} catch (err) {
    console.error(err.message);
}

try {

const position = await getPosition(options);

console.log(position);

} catch (err) {

console.error(err.message);

}

[Javascript] Ce que tous les développeurs javascript devraient savoir à propos des caractères unicode

25/07/2022 / admin

Source: What every JavaScript developer should know about Unicode

Replace/Remove characters that Don’t match Regex in JS

[Javascript] Eviter qu’une callback function possédant un paramètre et invoquée via un EventListener click ne s’exécute immédiatement

21/07/2022 / admin

(comprendre: sans que l’utilisateur n’ait cliqué au préalable).

Source: Javascript, addEventListener callback function executes immediately and only once?
Petite explication simple de ce qu’est un callback: Callback Function With Parameters in JavaScript

J’ai rencontré ce souci en cherchant à ajouter un addEventListener 'click' à des markers que je créais dans ma fonction pour les placer sur une Google Maps.

Avec la déclaration suivante, la fonction invoquée ci-dessous en clickCallback était exécutée immédiatement:

google.maps.event.addListener(marker, 'click', clickCallback(marker));

1	google.maps.event.addListener(marker, 'click', clickCallback(marker));

Pour pallier à mon problème, j’ai dû déclarer mon événement comme suit:

google.maps.event.addListener(marker, 'click', function(){
    clickCallback(marker);
});

google.maps.event.addListener(marker, 'click', function(){

clickCallback(marker);

});

Le code complet pour une vision plus globale:

La fonction dans laquelle j’initialise mon eventListener:

    function setMarker(point, m, clickCallback) {
        // [PNG version]]
        let marker = new google.maps.Marker({
            position: point.position,
            icon: mapOperator.icons[point.type].icon
        });

        // Marker events
        google.maps.event.addListener(marker, 'click', function(){
            clickCallback(marker);
        });
        // END: Marker events

        return marker;
    }

function setMarker(point, m, clickCallback) {

// [PNG version]]

let marker = new google.maps.Marker({

position: point.position,

icon: mapOperator.icons[point.type].icon

});

// Marker events

google.maps.event.addListener(marker, 'click', function(){

clickCallback(marker);

});

// END: Marker events

return marker;

}

L’exécution de cette fonction:

mapApi.setMarker(point, i, mapOperator.topic_onMarkerClick);

1	mapApi.setMarker(point, i, mapOperator.topic_onMarkerClick);

La callback function:

    function topic_onMarkerClick(marker) {
        console.log("click!");
    }

function topic_onMarkerClick(marker) {

console.log("click!");

}

[Javascript][Google Maps v3] Eviter une boucle infinie en exécutant un événement seulement si il n’a pas été invoqué dans les dernières x secondes

18/07/2022 / admin

Problème: des événements de l’API Google Maps v3 comme bounds_changed, zoom_changed, idle se déclenchent à chaque exécution de la méthode fitBounds qui permet d’ajuster automatiquement le zoom de la carte afin que celle-ci affiche l’ensemble des markers de la map.

MAIS… comme très souvent remonté (ici et là par exemple), l’exécution de la méthode fitBounds, incontournable si on souhaite afficher tous les markers disponibles sur la carte dans le viewport, va très logiquement déclencher les événements code>bounds_changed, zoom_changed, idle, puisqu’elle va faire « bouger » la carte lorsqu’elle va zoomer ou dézoomer. Si votre fonction fitBounds est exécutée au délenchement d’un des événements pré-cités, vous entrez dans une boucle infinie: l’exécution de fitBounds recommence encore er encore jusqu’à faire crasher le navigateur.

Solution: faire un mix de ce qui est suggéré ici: Do not fire ‘zoom_changed’ event when calling fitBounds function on map et ici: Fire javascript function 2 sec after no activity in input tag.

Créer un flag qui n’autorise pas les événements de la map à être exécutés si il est assigné (comme par défaut) à false.

let allowMapEventsToBeFired = false;

1	let allowMapEventsToBeFired = false;

Mettre en place un premier timer avec un seuil de 2 secondes qui se remettra à zéro et recommencera à chronométrer à chaque fois que l’event sera déclenché. Tant que ce timer n’aura pas atteint 2 secondes, il empêchera l’événement (bounds_changed dans notre exemple) de se déclencher réellement parce que le flag restera à false. Ce qu’on cherche ici, c’est d’éviter qu’en cas de boucle, le code assigné au déclenchement de l’événement ne soit exécuté encore et encore et encore…

let timer;
let timer2;
function onInput() {
    clearTimeout(timer);
    clearTimeout(timer2);
    timer = setTimeout(function(){ mapOperator.allowMapEventsToBeFired = true }, 1999);
    if ( mapOperator.allowMapEventsToBeFired === false ) {
        console.log('mapOperator.allowMapEventsToBeFired: ', mapOperator.allowMapEventsToBeFired);
        return false;
    } else if ( mapOperator.allowMapEventsToBeFired ) {
        console.log('mapOperator.allowMapEventsToBeFired: ', mapOperator.allowMapEventsToBeFired);
        timer2 = setTimeout(mapOperator.topic_updatesOnBoundsChanged.bind(this), 1000);
    }
}

google.maps.event.addListener(mapApi.mapObj, 'bounds_changed', onInput, false);

let timer;

let timer2;

function onInput() {

clearTimeout(timer);

clearTimeout(timer2);

timer = setTimeout(function(){ mapOperator.allowMapEventsToBeFired = true }, 1999);

if ( mapOperator.allowMapEventsToBeFired === false ) {

console.log('mapOperator.allowMapEventsToBeFired: ', mapOperator.allowMapEventsToBeFired);

return false;

} else if ( mapOperator.allowMapEventsToBeFired ) {

console.log('mapOperator.allowMapEventsToBeFired: ', mapOperator.allowMapEventsToBeFired);

timer2 = setTimeout(mapOperator.topic_updatesOnBoundsChanged.bind(this), 1000);

}

google.maps.event.addListener(mapApi.mapObj, 'bounds_changed', onInput, false);

function topic_updatesOnBoundsChanged() {
    // [TODO] vérifier si il y a de nouveau markers à afficher?

    /* On affiche/masque le bouton refreshMap */
    utils.toggleElementVisibility(refreshMap.$refreshMapButton);

    /* au click sur le bouton refreshMap: relancer le bordel */
    refreshMap.$refreshMapButton.addEventListener('click', mapOperator.topic_updatesOnMapEvents);
}

function topic_updatesOnBoundsChanged() {

// [TODO] vérifier si il y a de nouveau markers à afficher?

/* On affiche/masque le bouton refreshMap */

utils.toggleElementVisibility(refreshMap.$refreshMapButton);

/* au click sur le bouton refreshMap: relancer le bordel */

refreshMap.$refreshMapButton.addEventListener('click', mapOperator.topic_updatesOnMapEvents);

}

[Javascript] Utiliser la fonction map à l’intérieur d’une autre fonction

12/07/2022 / admin

Source: How to use map function and arrow function inside another function?

function arrayCalc(arr, fn){
  const arrRes = arr.map(a => fn(a)); // and not .map(arr => arr)
  return arrRes; // missing return statement
}

function arrayCalc(arr, fn){

const arrRes = arr.map(a => fn(a)); // and not .map(arr => arr)

return arrRes; // missing return statement

}

Ou:

function setMarkers(sourceArray, handleBounds = true) {
    // Autozoom and autocenter for Google maps Clustermap
    // https://stackoverflow.com/a/40109734
    let labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    if (handleBounds) {
        mapApi.boundsObj = mapApi.setBoundsRestriction();
    }
    const arrRes = sourceArray.map(function(location, i) {
        // console.log('location: ', location);
        if (handleBounds) {
            mapApi.boundsObj.extend(location);
            /* Sets the viewport to contain the given bounds. */
            mapApi.mapObj.fitBounds(mapApi.boundsObj);
        }

        let marker = new google.maps.Marker({
            position: location,
            label: labels[i % labels.length]
        });

        return marker;
    });

    return arrRes;
}

function setMarkers(sourceArray, handleBounds = true) {

// Autozoom and autocenter for Google maps Clustermap

// https://stackoverflow.com/a/40109734

let labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

if (handleBounds) {

mapApi.boundsObj = mapApi.setBoundsRestriction();

}

const arrRes = sourceArray.map(function(location, i) {

// console.log('location: ', location);

if (handleBounds) {

mapApi.boundsObj.extend(location);

/* Sets the viewport to contain the given bounds. */

mapApi.mapObj.fitBounds(mapApi.boundsObj);

}

let marker = new google.maps.Marker({

position: location,

label: labels[i % labels.length]

});

return marker;

});

return arrRes;

}

stateSynchronizer.allMarkersObj = mapApi.setMarkers(stateSynchronizer.allLocationsArr, false);

1	stateSynchronizer.allMarkersObj = mapApi.setMarkers(stateSynchronizer.allLocationsArr, false);

[Javascript] Rendre les variables et des fonctions déclarées dans des closures (publiques/privées) accessibles en-dehors de ces dernières

01/07/2022 / admin

Plusieurs sources pour cet article (car plusieurs techniques; à vous de choisir):

Avec le module pattern: How to avoid global variables in JavaScript?
Avec le Revealing module pattern
Avec window['varName'] = varName;: How to avoid global variables in JavaScript?
Un peu de culture générale sur les différentes façons de déclarer des variables en Javascript: Difference between variable declaration syntaxes in Javascript (including global variables)?

Avec le module pattern:

Je détaille celui-ci car il me plait bien 🙂 Mais voir également le Revealing module pattern juste en-dessous qui apporte quelques améliorations.

Variables et les fonctions privées: déclarées au sein d’une closure mais EN-DEHORS du scope du return
Variables et les fonctions publiques: déclarées au sein d’une closure mais DANS le scope du return

YAHOO.myProject.myModule = function () {

    //"private" variables:
    var myPrivateVar = "I can be accessed only from within YAHOO.myProject.myModule.";

    //"private" method:
    var myPrivateMethod = function () {
        YAHOO.log("I can be accessed only from within YAHOO.myProject.myModule");
    }

    return  {
        myPublicProperty: "I'm accessible as YAHOO.myProject.myModule.myPublicProperty."
        myPublicMethod: function () {
            YAHOO.log("I'm accessible as YAHOO.myProject.myModule.myPublicMethod.");

            //Within myProject, I can access "private" vars and methods:
            YAHOO.log(myPrivateVar);
            YAHOO.log(myPrivateMethod());

            //The native scope of myPublicMethod is myProject; we can
            //access public members using "this":
            YAHOO.log(this.myPublicProperty);
        }
    };

}(); // the parens here cause the anonymous function to execute and return

YAHOO.myProject.myModule = function () {

//"private" variables:

var myPrivateVar = "I can be accessed only from within YAHOO.myProject.myModule.";

//"private" method:

var myPrivateMethod = function () {

YAHOO.log("I can be accessed only from within YAHOO.myProject.myModule");

}

return {

myPublicProperty: "I'm accessible as YAHOO.myProject.myModule.myPublicProperty."

myPublicMethod: function () {

YAHOO.log("I'm accessible as YAHOO.myProject.myModule.myPublicMethod.");

//Within myProject, I can access "private" vars and methods:

YAHOO.log(myPrivateVar);

YAHOO.log(myPrivateMethod());

//The native scope of myPublicMethod is myProject; we can

//access public members using "this":

YAHOO.log(this.myPublicProperty);

}

};

}(); // the parens here cause the anonymous function to execute and return

Avec le Revealing module pattern

Avec le Revealing module pattern, toutes les variables et toutes les fonctions sont d’abord déclarées en privé et on se sert du return pour lister celles qu’on rend ensuite publiques. C’est plus lisible et plus pratique à l’utilisation.

var myModule = (function() {
  'use strict';

  var _privateProperty = 'Hello World';
  var publicProperty = 'I am a public property';

  function _privateMethod() {
    console.log(_privateProperty);
  }

  function publicMethod() {
    _privateMethod();
  }

  return {
    publicMethod: publicMethod,
    publicProperty: publicProperty
  };
})();

myModule.publicMethod(); // outputs 'Hello World'
console.log(myModule.publicProperty); // outputs 'I am a public property'
console.log(myModule._privateProperty); // is undefined protected by the module closure
myModule._privateMethod(); // is TypeError protected by the module closure

var myModule = (function() {

'use strict';

var _privateProperty = 'Hello World';

var publicProperty = 'I am a public property';

function _privateMethod() {

console.log(_privateProperty);

}

function publicMethod() {

_privateMethod();

}

return {

publicMethod: publicMethod,

publicProperty: publicProperty

};

})();

myModule.publicMethod(); // outputs 'Hello World'

console.log(myModule.publicProperty); // outputs 'I am a public property'

console.log(myModule._privateProperty); // is undefined protected by the module closure

myModule._privateMethod(); // is TypeError protected by the module closure

[Javascript] Attacher plusieurs événements à un même listener

01/07/2022 / admin

Source: Multiple Events to a Listener with JavaScript. Code source sous GitHub.

/**
 * 💡 WAY 1 💡
 */
const button1 = document.querySelector('.btnAction_1');

// 💬 Events
button1.addEventListener('click', showEvent1);
button1.addEventListener('mouseover', showEvent1);

// 💬 Function
function showEvent1(e) {
    const result1 = document.querySelector('.btnResult_1');
    result1.textContent = e.type;
}

/**

* 💡 WAY 1 💡

const button1 = document.querySelector('.btnAction_1');

// 💬 Events

button1.addEventListener('click', showEvent1);

button1.addEventListener('mouseover', showEvent1);

// 💬 Function

function showEvent1(e) {

const result1 = document.querySelector('.btnResult_1');

result1.textContent = e.type;

}

/**
 * 💡 WAY 2 💡
 */
const button2 = document.querySelector('.btnAction_2');

// 💬 Events
let myEvents = 'click mouseover'.split(' ');
myEvents.forEach(event => button2.addEventListener(event, showEvent2));

// 💬 Function
function showEvent2(e) {
    const result2 = document.querySelector('.btnResult_2');
    result2.textContent = e.type;
}

/**

* 💡 WAY 2 💡

const button2 = document.querySelector('.btnAction_2');

// 💬 Events

let myEvents = 'click mouseover'.split(' ');

myEvents.forEach(event => button2.addEventListener(event, showEvent2));

// 💬 Function

function showEvent2(e) {

const result2 = document.querySelector('.btnResult_2');

result2.textContent = e.type;

}

/**
 * 💡 WAY 3 💡
 */
const button3 = document.querySelector('.btnAction_3');

// 💬 Events
['click', 'mouseover'].forEach(event => button3.addEventListener(event, showEvent3));

function showEvent3(e) {
    const result3 = document.querySelector('.btnResult_3');
    result3.textContent = e.type;
}

/**

* 💡 WAY 3 💡

const button3 = document.querySelector('.btnAction_3');

// 💬 Events

['click', 'mouseover'].forEach(event => button3.addEventListener(event, showEvent3));

function showEvent3(e) {

const result3 = document.querySelector('.btnResult_3');

result3.textContent = e.type;

}

A noter que Chris Fernandini de gomakethings.com déclare encore l’option passive à false à la fin de la déclaration de son EventListener. En savoir plus sur les passive events listeners.

// Setup our function to run on various events
var someFunction = function (event) {
    // Do something...
};

// Add our event listeners
window.addEventListener('click', someFunction, false);
window.addEventListener('mouseover', someFunction, false);

// Setup our function to run on various events

var someFunction = function (event) {

// Do something...

};

// Add our event listeners

window.addEventListener('click', someFunction, false);

window.addEventListener('mouseover', someFunction, false);

[Javascript] Utiliser reduce pour obtenir la somme de toutes les valeurs d’une clé spécifique dans un tableau (ou un objet)

30/06/2022 / admin

Source: How to sum all of values from specific key in object?

J’ai cet objet:

var arr = [{ 'credit': 1, 'trash': null }, { 'credit': 2, 'trash': null}]

1	var arr = [{ 'credit': 1, 'trash': null }, { 'credit': 2, 'trash': null}]

…et je veux effectuer la somme de toutes les valeurs de la clé credit (ce qui me retournerait « 3 » dans le cas de mon tableau).

arr.reduce((total, obj) => obj.credit + total,0)
// 3

1 2	arr.reduce((total, obj) => obj.credit + total,0) // 3

[Javascript] Comment appeler une fonction à partir d’une chaîne de caractères (string) sans utiliser la méthode Eval

23/06/2022 / admin

Problème:

J’essaye de pusher une fonction dans un tableau array. Cette fonction est constituée notamment d’une partie dynamique (son argument itemValue) qui doit être interprété avant que la fonction ne soit poussée dans le tableau. J’utilise les templates literals pour ça.

filterCurrentSelection.push(`({ ${itemValue} }) => ${itemValue} === 1`);

1	filterCurrentSelection.push(`({ ${itemValue} }) => ${itemValue} === 1`);

Les templates literals ont bien été interprétés dans la fonction présente dans le tableau, mais cette dernière est stockée sous forme de string (chaîne de caractères – cf. les guillemets autour de la fonction dans ma capture) et ne peut donc pas être ré-exécutée!

Solution: utiliser Function à la place d’eval()

Source: N’utiliser eval() qu’en dernier recours !

Avec eval() et des template literals

filterCurrentSelection.push(eval(`({ ${itemValue} }) => ${itemValue} === 1`));

1	filterCurrentSelection.push(eval(`({ ${itemValue} }) => ${itemValue} === 1`));

Avec Function et sans template literals

Function('"use strict";return ({ ' + itemValue + '}) => ' + itemValue + ' === 1')();

1	Function('"use strict";return ({ ' + itemValue + '}) => ' + itemValue + ' === 1')();

Inclus dans mon push push():

filterCurrentSelection.push(Function('"use strict";return ({ ' + itemValue + '}) => ' + itemValue + ' === 1')());

1	filterCurrentSelection.push(Function('"use strict";return ({ ' + itemValue + '}) => ' + itemValue + ' === 1')());

Solution alternative

Source: How to Call a JavaScript Function From a String Without Using eval

Les deux exemples ci-dessous fonctionnent on their own, mais je n’ai pas réussi à adapter mon propre code pour les faire exploiter.

Fonction sans paramètre

// WITHOUT PARAMETERS:
function runMe(){ console.log("runMe!"); }

// function we want to run
var fnstring = "runMe";

// find object
var fn = window[fnstring];

// is object a function?
if (typeof fn === "function") fn();

// results in:
// "runMe!"

// WITHOUT PARAMETERS:

function runMe(){ console.log("runMe!"); }

// function we want to run

var fnstring = "runMe";

// find object

var fn = window[fnstring];

// is object a function?

if (typeof fn === "function") fn();

// results in:

// "runMe!"

Fonction avec trois paramètres

// WITH PARAMETERS:
function runMeParams(one, two, three){ 
  console.log("runMe!" + one);
  console.log("runMe!" + two);
  console.log("runMe!" + three);
}

// function name and parameters to pass
var fnstring = "runMeParams";
var fnparams = [1, 2, 3];

// find object
var fn = window[fnstring];

// is object a function?
if (typeof fn === "function") fn.apply(null, fnparams);

// results in:
// "runMe!1"
// "runMe!2"
// "runMe!3"

// WITH PARAMETERS:

function runMeParams(one, two, three){

console.log("runMe!" + one);

console.log("runMe!" + two);

console.log("runMe!" + three);

}

// function name and parameters to pass

var fnstring = "runMeParams";

var fnparams = [1, 2, 3];

// find object

var fn = window[fnstring];

// is object a function?

if (typeof fn === "function") fn.apply(null, fnparams);

// results in:

// "runMe!1"

// "runMe!2"

// "runMe!3"

devfrontend.info

Articles récents

Catégories

Archives

Méta

[Javascript] Exécuter un événement qui se déclenche plusieurs fois de suite seulement après un certain délais en temps (un timeout)

Nouvelle méthode (tips: utilisez celle-ci)

Ancienne méthode

Problème:

Solution

[Javascript] Utiliser l’API de Géolocalisation avec des promesses ou Async Await

Avec une promesse:

Avec `async`, `await`:

[Javascript] Ce que tous les développeurs javascript devraient savoir à propos des caractères unicode

[Javascript] Eviter qu’une callback function possédant un paramètre et invoquée via un EventListener click ne s’exécute immédiatement

Le code complet pour une vision plus globale:

[Javascript][Google Maps v3] Eviter une boucle infinie en exécutant un événement seulement si il n’a pas été invoqué dans les dernières x secondes

[Javascript] Utiliser la fonction map à l’intérieur d’une autre fonction

[Javascript] Rendre les variables et des fonctions déclarées dans des closures (publiques/privées) accessibles en-dehors de ces dernières

Avec le module pattern:

Avec le Revealing module pattern

[Javascript] Attacher plusieurs événements à un même listener

[Javascript] Utiliser reduce pour obtenir la somme de toutes les valeurs d’une clé spécifique dans un tableau (ou un objet)

[Javascript] Comment appeler une fonction à partir d’une chaîne de caractères (string) sans utiliser la méthode Eval

Problème:

Solution: utiliser Function à la place d’eval()

Avec eval() et des template literals

Avec Function et sans template literals

Solution alternative

Fonction sans paramètre

Fonction avec trois paramètres

Nouvelle méthode (tips: utilisez celle-ci)

Ancienne méthode

Problème:

Solution

Avec une promesse:

Avec async, await:

Le code complet pour une vision plus globale:

Avec le module pattern:

Avec le Revealing module pattern

Problème:

Solution: utiliser Function à la place d’eval()

Avec eval() et des template literals

Avec Function et sans template literals

Solution alternative

Fonction sans paramètre

Fonction avec trois paramètres

Avec `async`, `await`: