Étiquette : callback

[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] Exécuter une fonction seulement une fois

11/05/2021 / admin

Mise à jour: 09/12/2021

Un autre moyen suggéré dans le chapitre 15 Handling Events du livre Eloquent Javascript.

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>

let button = document.querySelector("button");

function once() {

console.log("Done.");

button.removeEventListener("click", once);

}

button.addEventListener("click", once);

</script>

js/utils.js:

const executeOnlyOnce = ( function( callbackFunction ) {
    let alreadyExecuted = false;
    return function( callbackFunction ) {
        if ( !alreadyExecuted ) {
            alreadyExecuted = true;

            // Execute only once!
            callbackFunction();
        }
    };
})();

export { executeOnlyOnce }

const executeOnlyOnce = ( function( callbackFunction ) {

let alreadyExecuted = false;

return function( callbackFunction ) {

if ( !alreadyExecuted ) {

alreadyExecuted = true;

// Execute only once!

callbackFunction();

}

};

})();

export { executeOnlyOnce }

import { executeOnlyOnce } from './js/utils';

let hadPreviousBreakpointChanges = false;
console.log( hadPreviousBreakpointChanges ); // "false"

const onBreakpointChange = function(){
    hadPreviousBreakpointChanges = true;
};

import { executeOnlyOnce } from './js/utils';

let hadPreviousBreakpointChanges = false;

console.log( hadPreviousBreakpointChanges ); // "false"

const onBreakpointChange = function(){

hadPreviousBreakpointChanges = true;

};

executeOnlyOnce(onBreakpointChange);
console.log(hadPreviousBreakpointChanges); // "true"

1 2	executeOnlyOnce(onBreakpointChange); console.log(hadPreviousBreakpointChanges); // "true"

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

Articles récents

Catégories

Archives

Méta

Étiquette : callback

[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] Exécuter une fonction seulement une fois

[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

Le code complet pour une vision plus globale:

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

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()`