Fonctions et variables en Javascript

Résolu/Fermé

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 - 18 févr. 2020 à 20:46

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 ?

A voir également:

Fonctions et variables en Javascript
Fonction si et - Guide
Telecharger javascript - Télécharger - Langages
Javascript echo ✓ - Forum PHP
Erreur #125 javascript - Forum Mozilla Firefox

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

Kap_ Messages postés 12 Date d'inscription samedi 1 février 2020 Statut Membre Dernière intervention 4 juin 2020
Modifié le 17 févr. 2020 à 16:35

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

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

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");
		}*/
	);
	
};

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

Réponse 2 / 2

jordane45 Messages postés 38466 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 18 avril 2025 4 741
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

.

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

jordane45 Messages postés 38466 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 18 avril 2025 4 741 > 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é)

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule

java script error in the main process

javascript:void(0);

Impossible d'installer hyper v

Remplir une cellule (texte) en fonction d'une autre (texte).