setTimeout – devfrontend.info

[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] Vérifier, au clic, la présence d’une classe dans le DOM et afficher ou masquer des éléments en fonction

16/09/2016 / admin

// Par défaut, on masque les éléments qui ne doivent être visibles que lorsque la classe "is-active" est présente dans le DOM
$('#showIfLinkIsActive').addClass('hidden');

// Fonction qui vérifie si la classe "is-active" est présente dans le DOM
function setElementVisibility(){
	if($('.foo-element a.link').hasClass('is-active')){
		$('#showIfLinkIsActive').removeClass('hidden');
	}
	else{
		$('#showIfLinkIsActive').addClass('hidden');
	}
}

// Au clic sur un lien, on lance la fonction ci-dessus (on attend 100ms que la classe ".is-active" fasse son apparition dans le DOM)
$('.foo-element a.link').on('click', function(){
	setTimeout(setElementVisibility, 100);
});

// Au clic n'importe où dans le document (fermeture automatique du lien ouvert), on relance la fonction ci-dessus...
$(document).on('click', function(){
	setTimeout(setElementVisibility, 100);
});

// ...mais le lien ouvert ne doit pas se fermer au clic sur ces éléments
var fooElements = $('.foo-element, .foo-element2, .foo-element3');

fooElements.on('click', function(e){
	e.stopPropagation();
});

// Par défaut, on masque les éléments qui ne doivent être visibles que lorsque la classe "is-active" est présente dans le DOM

$('#showIfLinkIsActive').addClass('hidden');

// Fonction qui vérifie si la classe "is-active" est présente dans le DOM

function setElementVisibility(){

if($('.foo-element a.link').hasClass('is-active')){

$('#showIfLinkIsActive').removeClass('hidden');

}

else{

$('#showIfLinkIsActive').addClass('hidden');

}

// Au clic sur un lien, on lance la fonction ci-dessus (on attend 100ms que la classe ".is-active" fasse son apparition dans le DOM)

$('.foo-element a.link').on('click', function(){

setTimeout(setElementVisibility, 100);

});

// Au clic n'importe où dans le document (fermeture automatique du lien ouvert), on relance la fonction ci-dessus...

$(document).on('click', function(){

setTimeout(setElementVisibility, 100);

});

// ...mais le lien ouvert ne doit pas se fermer au clic sur ces éléments

var fooElements = $('.foo-element, .foo-element2, .foo-element3');

fooElements.on('click', function(e){

e.stopPropagation();

});

[jQuery] Lancer une fonction après un délais avec setTimeout

11/02/2015 / admin

Source : Run Function After Delay.

$(document).ready(function() {

  // place this within dom ready function
  function myFunction() {     
    alert("toto");
  }

  // use setTimeout() to execute
  setTimeout(myFunction, 1000)

});

$(document).ready(function() {

// place this within dom ready function

function myFunction() {

alert("toto");

}

// use setTimeout() to execute

setTimeout(myFunction, 1000)

});

Articles récents

Catégories

Archives

Méta

Étiquette : setTimeout

[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] Vérifier, au clic, la présence d’une classe dans le DOM et afficher ou masquer des éléments en fonction

[jQuery] Lancer une fonction après un délais avec setTimeout

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

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