Attendre la fin d'une fonction

**vilsafur** · 02/11/2015, 10h15

Bonjour,

J'espere que vous pourrez aider un newbe

Je sais que le sujet a déjà été traité plein de fois mais toutes les solutions trouvées pour le moment ne m'ont pas aidées.

Problème :

J'utilise 2 fonctions (A et B) l'une à la suite de l'autre et la fonction A comporte une autre fonction (X).

Le problème est que, même avec un .done(), la fonction B s'exécute avant la fonction X.

Je n'arrive pas a executer la fonction B après la fin de la fonction A, qui se termine après la fin de la fonction X.

Code :
Base :

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
$('.btn-add-node').click(function(){
	console.log('btn add node clicked');
	var actual_tree = $('#tree').treeview('getNode', 0);
	// $('#tree').hide();
	var ref_model = $('#ref_model').text();
	$(this).parent().parent().children('.modal-body').children('.col-md-8').children('.form-checkbox').children('.controls').children('label').children('input[type=checkbox]').each(function (index, value) {
		if (this.checked) {
 
			actual_tree = $(this).addNode($(this).getNode(), ref_model, actual_tree); // => Fonction A
		} else {
	    	actual_tree = $(this).removeNode(value, ref_model, actual_tree);
		}
	});
	$(this).createTree([actual_tree]); // => fonction B
	// $('#tree').show();
	$('#modal_add_nodes').modal('hide');
});

Fonction A :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
/*
	* Add a node in the treeView
	*/
	$.fn.addNode = function(data, reference, actual_tree) {
		console.log('add node');
		console.log(data);
		console.log('add ' + data.records.text + ' in ' + reference);
		actual_tree = insertSubNode(data.records, reference, actual_tree);
		return actual_tree;
	};

Fonction X :

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
19
20
21
22
23
24
25
26
function insertSubNode(data, reference, node) {
	console.log('insert sub node');
	if (node.nodeId == reference) {
		var need_add = true;
		$.each(node.nodes, function(index, value) {
			if (data.text == value.text) {
				need_add = false;
			}
		});
		if (need_add) {
			node.nodes.splice(0, 0, data);
		}
	} else if (node.hasOwnProperty('nodes')) {
		var new_nodes = [];
		$.each(node.nodes, function(index, value) {
			if (value.hasOwnProperty('nodes')) {
				new_nodes.push(insertSubNode(data, reference, value));
			} else {
				new_nodes.push(value);
			}
		});
		node['nodes'] = new_nodes;
	}
 
	return node;
};

**Ggcool91** · 02/11/2015, 11h18

Code :

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

1
2
3
4
5
6
7
8
9
10
11
$(this).parent().parent().children('.modal-body').children('.col-md-8').children('.form-checkbox').children('.controls').children('label').children('input[type=checkbox]').each(function (index, value) {
          if (this.checked) {
                  actual_tree = $(this).addNode($(this).getNode(), ref_model, actual_tree, function(){
                        $(this).createTree([actual_tree]); // => fonction B
                  ); // => Fonction A
	  } else {
	          actual_tree = $(this).removeNode(value, ref_model, actual_tree, function(){
                        $(this).createTree([actual_tree]); // => fonction B
                  );
	  }
	});

Cela fonctionne-t-il ? Pour moi attendre qu'une fonction se termine se fait par l'appel au Callback d'une fonction (en rajoutant 'function(){ /* Les choses à faire */}' à la fin d'une fonction comme j'ai marqué au dessus)

**vilsafur** · 02/11/2015, 12h03

Merci de ta réponse,

Je me suis servi de ta methode pour modifier mon code, cependant, ma dernière fonction ($(this).createTree([actual_tree])) n'est pas appelée.

Voici le code modifié :

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
19
$('.btn-add-node').click(function(){
	console.log('btn add node clicked');
	var actual_tree = $('#tree').treeview('getNode', 0);
	$('#tree').hide();
	var ref_model = $('#ref_model').text();
	$(this).parent().parent().children('.modal-body').children('.col-md-8').children('.form-checkbox').children('.controls').children('label').children('input[type=checkbox]').each(function (index, value) {
		if (this.checked) {
			$.getJSON("/exports/data/" + $(this).val(), function(data) {
		        $(this).addNode(data, ref_model, actual_tree, function(){
                        $(this).createTree([actual_tree]); // => fonction B
                  });
		    });
		} else {
	    	actual_tree = $(this).removeNode(value, ref_model, actual_tree);
		}
	});
	$('#tree').show();
	$('#modal_add_nodes').modal('hide');
});

**Ggcool91** · 02/11/2015, 12h09

Tu dis que ta dernière fonction ($(this).createTree([actual_tree])) n'est pas appelée, tu parles de celle du if ? Parce que si oui je ne vois pas trop pourquoi.

Par contre quelque chose me perturbe dans ton code modifié, sur ton premier message, ta fonction ($(this).createTree([actual_tree])) s'applique au if ET au else (si je dis pas de bêtises ?) or dans ton code modifié tu n'appliques ta fonction ($(this).createTree([actual_tree])) que à ton if. Normal ?

**vilsafur** · 02/11/2015, 12h16

Effectivement, j'ai oublié de préciser que je ne parlai que de la fonction "if", plus particulièrement de cette partie du code :

Code :

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

1
2
3
4
5
6
 
$.getJSON("/exports/data/" + $(this).val(), function(data) {
    $(this).addNode(data, ref_model, actual_tree, function(actual_tree){
        $(this).createTree([actual_tree]); // => fonction B
    });
});

Dans cette partie, le "$(this).createTree([actual_tree]);" n'est pas appelé. (console.log a l'appuie).

Je n'ai pas encore touché à la partie "else" qui ne s'applique que si le "if" est appelé une première fois.

Je ne vois pas non plus pourquoi puisque la fonction "$(this).addNode()" est bien appelée.

**Ggcool91** · 02/11/2015, 12h31

Essaye d'utiliser des alert(); afin de savoir si tu passes par tel ou tel endroit, ça aide beaucoup pour débugger un script.

J'ai un autre questionnement concernant ton paramètre actual_tree que tu passes à ta fonction B entre crochets. Pourquoi justement entre crochets alors que tu l'utilises sans crochet le reste du temps ?

**vilsafur** · 02/11/2015, 12h42

Je prefere les console.log() qui me permette d'executer l'ensemble de mes scripts sans pour autant polluer de fenetre supplémentaire.
Après je ne sais pas si c'est réellement la meilleur solution.

Concernant les crochets, c'est pour la mise en forme des données (au format JSON) dans la fonction "createTree()" qui est utilisée ailleurs.

**Ggcool91** · 02/11/2015, 12h57

Ah d'accord, dans ce cas la je ne sais pas d'ou ca peut venir

**vilsafur** · 02/11/2015, 14h32

Ok Ggcool91.

Je viens de reussir a mettre en place le système pour l'ajout d'un noeud grace aux objects jQuery.Deferred, cependant la suppression d'un noeud ne fonctionne pas.

Voici le code à jour :

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
 
$('.btn-add-node').click(function(){
	console.log('btn add node clicked');
	var actual_tree = $('#tree').treeview('getNode', 0);
	$('#tree').hide();
	var ref_model = $('#ref_model').text();
	$(this).parent().parent().find('input[type=checkbox]').each(function (index, value) {
		if (this.checked) {
			$.getJSON("/exports/data/" + $(this).val(), function(data) {
		        $(this).addNode(data, ref_model, actual_tree);
		    });
		} else {
	    	actual_tree = $(this).removeNode(value, ref_model, actual_tree); // est pris en compte car log
	    	$(this).createTree([actual_tree]); // n'est pas pris en compte (ou mauvaises valeurs dans "actual_tree")
		}
	});
	$('#tree').show();
	$('#modal_add_nodes').modal('hide');
});
 
$.fn.addNode = function(data, reference, actual_tree) {
	console.log('add node');
	console.log('add ' + data.records.text + ' in ' + reference);
	var dfd = $.Deferred();
	actual_tree = insertSubNode(data.records, reference, actual_tree, dfd);
	$.when(dfd, insertSubNode).done(function(){
		console.log(actual_tree);
		$(this).createTree([actual_tree]);
	})
	return actual_tree;
};
 
$.fn.removeNode = function(value, reference, actual_tree) {
	console.log('remove node');
	console.log('remove :' + value.value + ' in ' + reference);
	var reference_tree = $('#tree').treeview('getNode', reference);
	actual_tree = removeSubNode(value.value, reference.text, actual_tree);
	return actual_tree;
};
 
function insertSubNode(data, reference, node, deferred) {
	console.log('insert sub node');
	if (node.nodeId == reference) {
		var need_add = true;
		$.each(node.nodes, function(index, value) {
			if (data.text == value.text) {
				need_add = false;
			}
		});
		if (need_add) {
			node.nodes.splice(0, 0, data);
		}
        deferred.resolve();
	} else if (node.hasOwnProperty('nodes')) {
		var new_nodes = [];
		$.each(node.nodes, function(index, value) {
			if (value.hasOwnProperty('nodes')) {
				new_nodes.push(insertSubNode(data, reference, value, deferred));
			} else {
				new_nodes.push(value);
			}
		});
		node['nodes'] = new_nodes;
	}
 
	return node;
};
 
function removeSubNode(data, reference, node) {
	console.log('remove sub node');
	if (node.text == reference) {
		var new_nodes = [];
		$.each(node.nodes, function(index, value) {
			if (value.text != data) {
				new_nodes.push(value);
			}
		});
		node['nodes'] = new_nodes;
	} else if (node.hasOwnProperty('nodes')) {
		var new_nodes = [];
		$.each(node.nodes, function(index, value) {
			if (value.hasOwnProperty('nodes')) {
				new_nodes.push(removeSubNode(data, reference, value));
			} else {
				new_nodes.push(value);
			}
		});
		node['nodes'] = new_nodes;
	}
 
	return node;
};

Attendre la fin d'une fonction

JavaScript

Discussions similaires

Partager

Partager