Fonctions et variables en Javascript

Résolu
Kap_ Messages postés 12 Date d'inscription samedi 1 février 2020 Statut Membre Dernière intervention 4 juin 2020 - 16 févr. 2020 à 12:07
 Utilisateur anonyme -
Bonjour, je suis en ce moment en train d'essayer de créer une extension pour chrome, sauf que dans le programme en javascript de mon popup, je me rends compte qu'une partie est lue dans le mauvais sens. Je m'explique avec le programme : 
let dld = document.getElementById('Button');
var adress;
dld.onclick = function(element){

	chrome.tabs.query({
		'active': true,
		'currentWindow': true
	},
		function (tabs) {
    		var adress = tabs[0].url;
    		alert(adress);
		}
	);
	
	alert(adress);

	chrome.tabs.create(
		{	'url': 'https://google.com',
			'pinned':true,
			'active':false
		},
		/*function(tab){
			alert("tab created");
		}*/
	);
	
};


Ici la partie 
alert(adress);
est lue avant le 
chrome.tabs.query
alors que ce devrai être l'inverse. Résultat il n'arrive pas à récupérer l'URL du site sur lequel je suis, ce qui me sera important par la suite. Quelqu’un pourrait-il m'aider à résoudre ce problème ?

2 réponses

Réponse 1 / 2
Utilisateur anonyme
17 févr. 2020 à 15:54
C'est normal, function (tabs) est le callback, il sera exécuté dès lors que chrome.tabs.query aura retourné (on dit de cetter dernière qu'elle est asynchrone). Pendant ce temps, JavaScript ne reste pas les bras croisés et passe au 2d alert(adress);, lui qui d'ailleurs vaudra toujours undefined ; il faut comprendre que var adress; que tu déclares au tout début et var adress = tabs[0].url; sont 2 variables complètement différentes, la 1re est globale, la 2de est propre à function (tabs) (on parle de portée locale). Si tu veux plutôt modifier la valeur de la variable globale pour qu'elle s'affiche dans le 2d alert, tu dois simplement lui assigner la nouvelle valeur : 
adress = tabs[0].url; // pas de var ; on modifie la variable adress déjà existante
1
Kap_ Messages postés 12 Date d'inscription samedi 1 février 2020 Statut Membre Dernière intervention 4 juin 2020
17 févr. 2020 à 16:30
Si je comprends bien, j'enlève donc le 
var
pour ne pas créer une deuxième variable, mais aurait-tu une façon d'attendre que la variable ne corresponde plus à 
undefined
à part avec ce 
while
qui, en plus de ne pas fonctionner, me fait crasher la page ? 
let dld = document.getElementById('Button');
var adress;
dld.onclick = function(element){
 while (adress === undefined) {
  chrome.tabs.query({
   'active': true,
   'currentWindow': true
  },
  function (tabs) {
   adress = tabs[0].url;
  }
 );
 }
 alert(adress);
 chrome.tabs.create(
 { 'url': 'https://google.com',
  'pinned':true,
  'active':false
 },
 /*function(tab){
  alert("tab created");
 }*/
 );
};

En tout cas merci de m'aider
0
Utilisateur anonyme > Kap_ Messages postés 12 Date d'inscription samedi 1 février 2020 Statut Membre Dernière intervention 4 juin 2020
18 févr. 2020 à 16:04
function (tabs) est appelée dès lors que chrome.tabs.query est complété. C'est à ce moment que vous affectez une valeur à adress (qui d'ailleurs s'écrit address en anglais). Vous n'avez qu'à spécifier le alert à cet endroit : 
function (tabs) {
   adress = tabs[0].url;
   alert(adress);
}
Si rien ne s'affiche, c'est que chrome.tabs.query ne retourne pas, vérifiez alors la console
0
Kap_ Messages postés 12 Date d'inscription samedi 1 février 2020 Statut Membre Dernière intervention 4 juin 2020 > Utilisateur anonyme
18 févr. 2020 à 18:51
Merci de cette aide, maintenant j'arrive à récupérer l'adresse, mais (si ce n'est pas trop te demander) j'aimerais que le programme s'arrête le temps de récupérer la variable et qu'il ne fasse rien en attendant. Aurais-tu une idée de comment faire ?
Voici où j'en suis dans mon programme : 
let dld = document.getElementById('Button');
var address;
dld.onclick = function(element){
	chrome.tabs.query(
		{
			'active': true,
			'currentWindow': true
		},
		function (tabs) {
			address = tabs[0].url;
			alert(address);
		}
	);

	chrome.tabs.create(
		{	'url': 'https://google.com',
			'pinned':true,
			'active':false
		},
		/*function(tab){
			alert("tab created");
		}*/
	);
	
};
0
Utilisateur anonyme > Kap_ Messages postés 12 Date d'inscription samedi 1 février 2020 Statut Membre Dernière intervention 4 juin 2020
18 févr. 2020 à 20:46
JavaScript est construit autour de fonctions asynchrones comme celle-là. C'est justement ça l'idée, il ne s'arrête jamais pour patienter. Vous pouvez mettre tout ce que vous voulez dans le callback ; par sourci de clareté alors, vous feriez mieux de le définir ailleurs : 
chrome.tabs.query(
	{
		'active': true,
		'currentWindow': true
	},
	faireQQchose);

var faireQQchose = function(tabs) {
	// Dès que chrome.tabs.query a exécuté, c'est fonction est appelée
	address = tabs[0].url;
	alert(address);
	// placez-y ce que vous voulez ; le script au complet si ça vous plaît
0
Réponse 2 / 2
jordane45 Messages postés 38486 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 août 2025
16 févr. 2020 à 15:01
Bonjour,

tu parles du quel 
alert(adress);

vu que tu en a deux dans ton code ?

PS: A l'avenir, merci d'utiliser correctement les balises de code en y précisant le langage afin que l'on ait la coloration syntaxique, l'indentation et les numéros de lignes.
Explications disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

.

0
Kap_ Messages postés 12 Date d'inscription samedi 1 février 2020 Statut Membre Dernière intervention 4 juin 2020
16 févr. 2020 à 15:10
En fait, mon deuxième 
alert(adress);
passe avant le premier, ce que je ne comprends absolument pas et que j 'aimerai bien résoudre

PS : je n'étais pas au courant de cette possibilité de mettre le langage dans les balises de code que j'utiliserais bien à l'avenir
0
jordane45 Messages postés 38486 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 août 2025 > Kap_ Messages postés 12 Date d'inscription samedi 1 février 2020 Statut Membre Dernière intervention 4 juin 2020
16 févr. 2020 à 15:34
Je n'ai pas vérifié, mais je pense que les fonctions sont asynchrones.
Il faut donc placer les codes qui doivent s'enchainer de façon plus imbriquer ou utiliser les méthodes (si elles existent) pour s'assurer que la fonction est terminée avant de passer à la suivante.
Tout doit être indiqué dans la doc officielle (que je t'avais déjà donné)
0

Discussions similaires

java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
javascript:void(0);
nano -
JCVD -

18 réponses
Impossible d'installer hyper v
dan4400 -
dan4400 -

2 réponses
Faire un echo dans un script JS
CorentinRoche -
CorentinRoche -

6 réponses