Discussion :

[lionelll]

Bonjour à tous,

Depuis quelques années, je n'ai pas développé en JS et j'ai besoin de reprendre un script tout simple mais il ne exécute pas dans l'ordre.

Le voici :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
getNotificationSounds2(serialOrName, idSound, callback) 
    {
    console.log("1");
        let result="";        
        this.getNotificationSounds(serialOrName, (err, res) => 
        {
            console.log("2");
            res.notificationSounds.forEach(function(item, index) {
                if (item['id'] == idSound) {
                result=item;            
                console.log("3");
                }
            });
        });
    console.log("4");
    return result;
    }

Je me retrouve avec 1 puis 4 puis 2 puis 3

Je sais c'est l'erreur classique de JS en synchrone / asynchrone et j'imagine que c'est tout simple à changer mais j'ai passé l'après midi a essayer de retrouver comment faire.

Une bonne âme pourrait m'aider ?

Merci

[Invité]

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

...

Faux...

[Beginner.]

Salut,

Je me retrouve avec 1 puis 4 puis 2 puis 3

Oui c'est normal...

Et effectivement je pense que c'est un problème lié à l’asynchrone, regarde ce cas similaire #2* pour une explication...

* Dans le message il y a un autre lien...

... et j'imagine que c'est tout simple à changer mais j'ai passé l'après midi a essayer de retrouver comment faire.

Ben je ne sais si c'est simple à changer, il faudrait qu'on sache ce que tu veux faire exactement...

Je ne sais pas si il y a moyen de faire en sorte que ton item soit retourné par la fonction getNotificationSounds2 mais à priori ne devrais-tu pas plutôt utiliser la fonction callback passée en troisième paramètre de la fonction getNotificationSounds2 (serialOrName, idSound, callback) pour effectuer le traitement voulue ?

D'ailleurs si tu ne l'utilises pas pour cela alors pourquoi la passer en paramètre ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
getNotificationSounds2(serialOrName, idSound, callback) 
    {
    console.log("1");
        let result="";        
        this.getNotificationSounds(serialOrName, (err, res) => 
        {
            console.log("2");
            res.notificationSounds.forEach(function(item, index) {
                if (item['id'] == idSound) {
                result=item;            
                console.log("3");
                return result;
                }
            });
        });
    }

Je ne suis pas sûr que cela va marcher*, il faudrait qu'on sache ce qui est voulu exactement...

* Je dis ça pour deux raisons :

1- Le return result; est à l'intérieur de la fonction du forEach or on ne récupère pas ce qui est retourné par cette fonction...

2- Comme expliqué ici : "Il n'existe aucun moyen d'arrêter une boucle forEach en dehors de lever une exception..."

Et apparemment ça vaut aussi pour un return (la boucle continue même après un return), exemple :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
var array1 = ['a', 'b', 'c'];
 
array1.forEach(function (element) {
    console.log(element);
 
    if (element == 'b') {
        console.log("element est égal à 'b'");
        return element
    }
 
});

Cela affiche ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
a
b
element est égal à 'b'
c

On voit que la lettre 'c' est affichée malgré l’exécution de return element...

Problème pas évident mine de rien...

[Invité]

@Beginner.

Alors, là, j'en apprends une bien bonne !
JS ne se comporte pas comme PHP...

En PHP :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
function afficher()
{
	$array1 = ['a', 'b', 'c'];
	$result = '';
	foreach($array1 as $element) {
		echo $element.'<br/>';
		if ($element == 'b') {
			$result = "element est égal à 'b'".'<br/>';
			echo $result;
			return $result; // en PHP : arrête la boucle et sort de la fonction...
		}
	}
}
$affichage = afficher();
echo 'affichage : '.$affichage; 
?>

On obtient :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
a
b
element est égal à 'b'
affichage : element est égal à 'b'

Alors qu'en JS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function afficher()
{
	var array1 = ['a', 'b', 'c'];
	var result = '';
	array1.forEach(function (element) {
		console.log(element);
		if (element == 'b') {
			result = "element est égal à 'b'";
			console.log( result );
			return result;
		}
	});
}
var affichage = afficher();
console.log('affichage : ' + affichage);

On obtient :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
a
b
element est égal à 'b'
c
affichage : undefined

[Beginner.]

Et oui il y a de quoi pleurer lol...

Pas trop quand même...

[Invité]

Bonsoir,

@jreaux62 : Encore faudrait-il comparer des éléments comparables .

L'appel JS de Array.forEach() équivaut à utiliser array_walk() du PHP, les deux utilisant une fonction callback. De ce fait, le return nous fera seulement quitter ce callback et non la boucle sur le tableau. Boucle qui s'effectue un niveau au dessus implicitement par la fonction (ignorant complètement l'éventuelle valeur retournée par le callback), et qui se poursuivra à moins qu'une exception ne soit lancée.

Comparons donc soit une boucle classique : le return nous fera donc quitter de suite la fonction afficher() (et donc la boucle).

Code php : Sélectionner tout - Visualiser dans une fenêtre à part 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <?php function afficher() { $array1 = ['a', 'b', 'c']; $result = ''; foreach($array1 as $element) { echo $element.'<br/>'; if ($element == 'b') { $result = "element est égal à 'b'".'<br/>'; echo $result; return $result; // en PHP : arrête la boucle et sort de la fonction... } } } $affichage = afficher(); echo 'affichage : '.$affichage; ?>

Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 function afficher() { let array1 = ['a', 'b', 'c']; let result = ''; for (let element of array1) { console.log(element); if (element == 'b') { result = "element est égal à 'b'"; console.log( result ); return result; } } } let affichage = afficher(); console.log('affichage : ' + affichage);

a b element est égal à 'b' affichage : element est égal à 'b'

a b element est égal à 'b' affichage : element est égal à 'b'

Soit l'appel à ces fonctions : le return nous fera juste quitter le callback passé à la fonction forEach()/array_walk(), mais pas la boucle.
(array_walk() retournant simplement true, et forEach() undefined, inutile de récupérer leur sortie.)

Code php : Sélectionner tout - Visualiser dans une fenêtre à part 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <?php function afficher() { $array1 = ['a', 'b', 'c']; $result = ''; array_walk($array1, function ($element) { echo $element.'<br/>'; if ($element == 'b') { $result = "element est égal à 'b'".'<br/>'; echo $result; } }); } afficher(); ?>	Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part 1 2 3 4 5 6 7 8 9 10 11 12 13 function afficher() { let array1 = ['a', 'b', 'c']; let result = ''; array1.forEach(function (element) { console.log(element); if (element == 'b') { result = "element est égal à 'b'"; console.log( result ); } }); } afficher();
a b element est égal à 'b' c	a b element est égal à 'b' c

Pas si différents au final .

@lionelll : Pour trouver l'élément d'un tableau qui vérifie un certain critère, Array.find() est plus indiqué :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
let item_found = res.notificationSounds.find( item => item['id'] == idSound );
// = undefined si non trouvé

Pour ce qui est de gérer un appel asynchrone, comme tu t'en es rendu compte, il faut savoir que l'appel d'une fonction asynchrone n'est pas bloquant. C'est à dire que l'exécution du code ne s'arrête pas au niveau de l'appel pour attendre la fin du traitement, et ne reprendre qu'une fois terminé. Non, l'exécution continue, et le traitement se fait en parallèle.
Ainsi ton result (pas encore obtenu) est déjà retourné (vide) par la fonction, alors que le traitement n'est pas encore terminé (voire a à peine débuté).

Pour ce faire il existe deux solutions :

1) Passer, comme tu sembles le faire, une fonction callback que tu devras appeler lorsque le traitement sera terminé en lui passant l'éventuel résultat (ici l'item correspondant au critère) :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
getNotificationSounds2(serialOrName, idSound, callback /* <=== ici */) 
{
	this.getNotificationSounds(serialOrName, (err, res) => 
	{
		callback( res.notificationSounds.find( item => item['id'] == idSound ) );
	});
}

L'appel de la fonction se fera alors de la manière suivante :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
getNotificationSounds2(serialOrName, idSound, item => {
    // utilisation de l'item
});

2) Retourner une Promise depuis la fonction : le résultat est alors transmis par l'appel à resolve() (ou si erreur, l'appel à reject()) :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
getNotificationSounds2(serialOrName, idSound) 
{
	return new Promise( (resolve, reject) => {
		this.getNotificationSounds(serialOrName, (err, res) => 
		{
	            resolve( res.notificationSounds.find( item => item['id'] == idSound ) );
	        });
        });
}

L'appel s'effectuera alors de la manière suivante :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
getNotificationSounds2(serialOrName, idSound)
.then( item => {
    // utilisation de l'item
})
.catch( err => {
    // traitement de l'erreur
});

[Beginner.]

Merci Winjerome pour ces explications supplémentaires, c'est instructif...

[Invité]

@Winjerome

J'ai comparé .forEach() JS et foreach() PHP, car elles ont le même nom.
Et bien que les scripts soient très similaires, le comportement du return est différent.

La comparaison n'a rien de ridicule, puisque je pensais, a tort, que le comportement serait le même.
D'où mon 1er message, supprimé depuis.


Sinon, il ne fallait pas l'appeler Array.forEach(), mais Array.arrayWalk() !

[psychadelic]

Sinon, il ne fallait pas l'appeler Array.forEach(), mais Array.Walk() !!

comprens pas, pour moi la méthode JS forEach() fonctionne bien de manière synchrone ( comme le foreach() du PHP ) le décalage est du au fait qi'il est placé à l'intérieur d'une fonction qui elle est asynchrone ( getNotificationSounds )

[Invité]

@psychadelic
Il ne s'agissait pas de résoudre la problématique de l'asynchrone (Winjerome y a répondu).
C'était juste pour illustrer que dans le .forEach JS et le foreach PHP, le return ne se comporte pas de la même façon.