Étiquette : function

[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] 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] 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"

[javascript] Les bases: les fonctions

12/02/2019 / admin

let a = 5;
let b = 3;

function sum(a , b) {
    let c = a + b;
    console.log(c);
}

sum(a, b); //8

a = 8;
b = 12;

sum(a, b); //20

let a = 5;

let b = 3;

function sum(a , b) {

let c = a + b;

console.log(c);

}

sum(a, b); //8

a = 8;

b = 12;

sum(a, b); //20

function myFn(a, b) {
    let c;
    a = a + 1;
    c = a + b;
    return c;
}

console.dir(myFn);
console.log(myFn(5, 10)); // 16
console.log(myFn(a)); // Uncaught ReferenceError: a is not defined

function myFn(a, b) {

let c;

a = a + 1;

c = a + b;

return c;

}

console.dir(myFn);

console.log(myFn(5, 10)); // 16

console.log(myFn(a)); // Uncaught ReferenceError: a is not defined

Scope

function myFunction1(a, b) {
	console.log(a, b);
}

function myFunction2(a, b) {
	console.log(a, b);
}

const a = true;
const b = null;

myFunction1(2, 3); // 2, 3
myFunction2(4, 5); // 4, 5
console.log(a, b); // true, null

function myFunction1(a, b) {

console.log(a, b);

}

function myFunction2(a, b) {

console.log(a, b);

}

const a = true;

const b = null;

myFunction1(2, 3); // 2, 3

myFunction2(4, 5); // 4, 5

console.log(a, b); // true, null

return

function sum(a, b) {
	return a + b;
}

sum(10, 5); // 15
sum("abc", 2); // "abc2"
sum(); // NaN (Not a Number)

function sum(a, b) {

return a + b;

}

sum(10, 5); // 15

sum("abc", 2); // "abc2"

sum(); // NaN (Not a Number)

function myFunction(a) {
	console.log(a);
	return a; // function stops HERE
	console.log(a);
	const c = 10;
	console.log(c); // code NOT evaluated
}

myFunction(10);

function myFunction(a) {

console.log(a);

return a; // function stops HERE

console.log(a);

const c = 10;

console.log(c); // code NOT evaluated

}

myFunction(10);

function mult(a, b, c) {
	const result = a * b * c;
	console.log(result);
}

mult(0,3,5); // 0
mult(2,3,5); // 30
mult(2,3,"abc"); // NaN
mult(); // NaN

console.log(mult(2,3,5)); // 30 is printed inside of the function and function returns "undefined"

function mult(a, b, c) {

const result = a * b * c;

console.log(result);

}

mult(0,3,5); // 0

mult(2,3,5); // 30

mult(2,3,"abc"); // NaN

mult(); // NaN

console.log(mult(2,3,5)); // 30 is printed inside of the function and function returns "undefined"

function concatenatedStrings(str1, str2) {
	return str1 + " " + str2;
}

const str3 = concatenatedStrings("Hello", "World");
console.log(str3); // Hello World

function concatenatedStrings(str1, str2) {

return str1 + " " + str2;

}

const str3 = concatenatedStrings("Hello", "World");

console.log(str3); // Hello World

function outerFunction(a, b) {
	function innerFunction(c) {
		return c * c;
	}
	const sum = a + b;
	const result = innerFunction(sum);

	console.log(result);
}

outerFunction(5, 2); // 49

// ...which can be simplified as:
function outerFunction(a, b) {
	function innerFunction(c) {
		return c * c;
	}
	console.log(innerFunction(a + b));
}

outerFunction(5, 2); // 49

function outerFunction(a, b) {

function innerFunction(c) {

return c * c;

}

const sum = a + b;

const result = innerFunction(sum);

console.log(result);

}

outerFunction(5, 2); // 49

// ...which can be simplified as:

function outerFunction(a, b) {

function innerFunction(c) {

return c * c;

}

console.log(innerFunction(a + b));

}

outerFunction(5, 2); // 49

Fonctions anonymes

Function expression assigned to the variable:

=> variable à laquelle est assignée une « function expression »

const myFunction = function(a, b) {
	let c;
	a = a + 1;
	c = a + b;
	return c;
};

myFunction(5, 3); // 9

const myFunction = function(a, b) {

let c;

a = a + 1;

c = a + b;

return c;

};

myFunction(5, 3); // 9

Function expression as argument in the function call

=> callback function

setTimeout(function() {
	console.log("Delayed message");
}, 1000);

setTimeout(function() {

console.log("Delayed message");

}, 1000);

callback function

setTimeout();

/**
 * CALLBACK FUNCTION
 * setTimeout
 */

setTimeout(function() {
	console.log("Delayed message");
}, 1000);

/**

* CALLBACK FUNCTION

* setTimeout

setTimeout(function() {

console.log("Delayed message");

}, 1000);

setInterval();

setInterval(function(){
	console.log("Message logged each 1 second");
}, 1000);

setInterval(function(){

console.log("Message logged each 1 second");

}, 1000);

Compteur incrémentiel avec la méthode `setInterval()`

let i = 1;
setInterval(function(){
	console.log("Message logged each 1 second " + i);
	i = i + 1;
}, 1000);

let i = 1;

setInterval(function(){

console.log("Message logged each 1 second " + i);

i = i + 1;

}, 1000);

Compteur incrémentiel qui s’arrêt automatiquement à 5 avec les méthodes `setInterval(), clearInterval() et setTimeout()`

let i = 1;
const repeat = setInterval(function() {
    console.log("Here is message number " + i);
    i = i + 1;
}, 1000);

repeat;

setTimeout(function(){
    clearInterval(repeat);
}, 5000);

let i = 1;

const repeat = setInterval(function() {

console.log("Here is message number " + i);

i = i + 1;

}, 1000);

repeat;

setTimeout(function(){

clearInterval(repeat);

}, 5000);

[jQuery] Etendre une fonction existante

21/02/2017 / admin

Source: Extending an existing jQuery function.

(function($)
{
    // maintain a reference to the existing function
    var oldcss = $.fn.css;
    // ...before overwriting the jQuery extension point
    $.fn.css = function()
    {
        // original behavior - use function.apply to preserve context
        var ret = oldcss.apply(this, arguments);

        // stuff I will be extending
        // that doesn't affect/change
        // the way .css() works

        // preserve return value (probably the jQuery object...)
        return ret;
    };
})(jQuery);

(function($)

{

// maintain a reference to the existing function

var oldcss = $.fn.css;

// ...before overwriting the jQuery extension point

$.fn.css = function()

{

// original behavior - use function.apply to preserve context

var ret = oldcss.apply(this, arguments);

// stuff I will be extending

// that doesn't affect/change

// the way .css() works

// preserve return value (probably the jQuery object...)

return ret;

};

})(jQuery);

Aller plus loin avec un callback

Source: Coderbits – Extending jQuery with onShow and onHide events.

<!-- Include latest jquery first! -->
<script>

    //Extending show-function example at http://stackoverflow.com/questions/5007279/extending-an-existing-jquery-function
    (function ($) {

        //Extend show() so that it trigger our event when called
        var show = $.fn.show;
        $.fn.show = function () {
            var ret = show.apply(this, arguments); //Read comments about these part at the stackoverflow linked above

            $(this).trigger("onShow"); //Trigger our new onShow event

            return ret; //Return object so that it can propagate
        };
        //Extend hide()
        var hide = $.fn.hide;
        $.fn.hide = function () {
            var ret = hide.apply(this, arguments); //Read comments about these part at the stackoverflow linked above

            $(this).trigger("onHide"); //Trigger our new onShow event

            return ret; //Return object so that it can propagate
        };

        //Define new event functions
        $.fn.onShow = function (callback) {
            if (callback != null) {
                $(this).on("onShow", function () {
                    callback(); //Trigger callback
                });
            } else {
                $(this).trigger("onShow"); //If no callback exist we trigger the event
            }
            return this;
        };

        $.fn.onHide = function (callback) {
            if (callback != null) {
                $(this).on("onHide", function () {
                    callback(); //Trigger callback
                });
            } else {
                $(this).trigger("onHide"); //If no callback exist we trigger the event
            }
            return this;
        };
    })(jQuery);
    //All the above code could be saved in an external .js file which is much easier to include

    //Testing time!
    $(function () { //DOM ready

        //Define what happens if our element is shown
        $("#testingElement").onShow(function () {
            alert("Hello!");
        });

        //Define what happens if our element is hidden
        $("#testingElement").onHide(function () {
            alert("Goodbye!");
        });

        //Button event
        $("button").click(function () {
            $("#testingElement").toggle();
        });
    });

</script>

<p id="testingElement" style="display:none;">Showing</p>
<button>Show</button>

//Extending show-function example at http://stackoverflow.com/questions/5007279/extending-an-existing-jquery-function

(function ($) {

//Extend show() so that it trigger our event when called

var show = $.fn.show;

$.fn.show = function () {

var ret = show.apply(this, arguments); //Read comments about these part at the stackoverflow linked above

$(this).trigger("onShow"); //Trigger our new onShow event

return ret; //Return object so that it can propagate

};

//Extend hide()

var hide = $.fn.hide;

$.fn.hide = function () {

var ret = hide.apply(this, arguments); //Read comments about these part at the stackoverflow linked above

$(this).trigger("onHide"); //Trigger our new onShow event

return ret; //Return object so that it can propagate

};

//Define new event functions

$.fn.onShow = function (callback) {

if (callback != null) {

$(this).on("onShow", function () {

callback(); //Trigger callback

});

} else {

$(this).trigger("onShow"); //If no callback exist we trigger the event

}

return this;

};

$.fn.onHide = function (callback) {

if (callback != null) {

$(this).on("onHide", function () {

callback(); //Trigger callback

});

} else {

$(this).trigger("onHide"); //If no callback exist we trigger the event

}

return this;

};

})(jQuery);

//All the above code could be saved in an external .js file which is much easier to include

//Testing time!

$(function () { //DOM ready

//Define what happens if our element is shown

$("#testingElement").onShow(function () {

alert("Hello!");

});

//Define what happens if our element is hidden

$("#testingElement").onHide(function () {

alert("Goodbye!");

});

//Button event

$("button").click(function () {

$("#testingElement").toggle();

});

</script>

<p id="testingElement" style="display:none;">Showing</p>

[jQuery] Conflits, message d’erreur « $ is not a function » et corrections possibles

11/02/2015 / admin

En jQuery, l’appel d’une fonction se fait en général de la manière suivante :

$(document).ready(function() {
   $("a").click(function() {
     alert("toto");
   });
 });

$(document).ready(function() {

$("a").click(function() {

alert("toto");

});

L’objet $ est utilisé par jQuery en tant que récupérateur de fonctions, et le script sait quelle librairie appeler. Problème : si vous utilisez d’autres librairies qui utilisent aussi le dollar comme objet par défaut (Prototype, Scriptaculous dans Magento par exemple…), vous obtiendrez potentiellement des conflits et un message d’erreur de type $ is not a function !

Solution 1 :

Utiliser la fonction jQuery.noConflict(); et créer une fonction anonyme. Source : jquery – is not a function error.

jQuery.noConflict();
(function($){
    "use strict";
    $(document).ready(function() {
      $("a").click(function() {
        alert("toto");
      });
    });
})(jQuery);

jQuery.noConflict();

(function($){

"use strict";

$(document).ready(function() {

$("a").click(function() {

alert("toto");

});

})(jQuery);

Solution 2 :

Remplacer tous les $ par un alias jQuery afin de réassigner toutes les variables de l’objet $ à ce dernier. Source : « $ is not a function » dans JQuery – La solution.

jQuery(document).ready(function() {
   jQuery("a").click(function() {
     alert("toto");
   });
 });

jQuery(document).ready(function() {

jQuery("a").click(function() {

alert("toto");

});

Articles récents

Catégories

Archives

Méta

Étiquette : function

[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] 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] 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

[javascript] Les bases: les fonctions

Scope

return

Fonctions anonymes

Function expression assigned to the variable:

Function expression as argument in the function call

callback function

setTimeout();

setInterval();

Compteur incrémentiel avec la méthode `setInterval()`

Compteur incrémentiel qui s’arrêt automatiquement à 5 avec les méthodes `setInterval(), clearInterval() et setTimeout()`

[jQuery] Etendre une fonction existante

Aller plus loin avec un callback

[jQuery] Conflits, message d’erreur « $ is not a function » et corrections possibles

Solution 1 :

Solution 2 :

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

Scope

return

Fonctions anonymes

Function expression assigned to the variable:

Function expression as argument in the function call

callback function

setTimeout();

setInterval();

Compteur incrémentiel avec la méthode setInterval()

Compteur incrémentiel qui s’arrêt automatiquement à 5 avec les méthodes setInterval(), clearInterval() et setTimeout()

Aller plus loin avec un callback

Solution 1 :

Solution 2 :

Compteur incrémentiel avec la méthode `setInterval()`

Compteur incrémentiel qui s’arrêt automatiquement à 5 avec les méthodes `setInterval(), clearInterval() et setTimeout()`