Widget avec setTimeout

**Edgar** · 30/10/2010, 15h34

Bonjour ,

J'essaye de développer un widget qui affichera des éléments mobiles ,
Pour ça je compte utiliser window.setTimeout ,
Malheureusement tous mes essais afin de mettre en action le windows.setTimeout dans le widget ont été infructueux ,

Le but pour moi est de pouvoir activer le mécanisme du widget puis de régulièrement renvoyer un callback à l'appelant

Voici ci-dessous un exemple basique de ce que j'essaye de faire

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<!-- Date de création: 27/10/2010 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.4.custom.min.js"></script>
<script type="text/javascript">
(function( $ ) {
var idTimer,
seuilMs=new Date().getTime();
$.widget( "flc.widgetTest", {
/*----------------------------*/
   options:{ecart:2000,rate:25},
/*----------------------------*/
	_create: function() {
	seuilMs=new Date().getTime()+this.options.ecart;
	this._horloge();
	},
/*----------------------------*/
	_horloge: function()
		{
		getMs=new Date().getTime();
		this.element.text(getMs+' - '+this.options.ecart+' '+seuilMs); /* hisoire d'afficher quelque chose */
		if (getMs>seuilMs)
			{ 
			seuilMs=getMs+this.options.ecart;
			this._trigger("complete",null,1);
			}
		/* ici problème	avec 
		window.setTimeout(function(){this._horloge()},this.options.rate);
		ou
		window.setTimeout("this._horloge()",this.options.rate);
		ou
		window.setTimeout("_horloge()",this.options.rate);
		*/
		idTimer=window.setTimeout(function(){this._horloge()},this.options.rate);	
		}
});
 
 
})( jQuery );
 
</script>
 
<script type="text/javascript">
$(document).ready(function(){
var v1=0;
$('#test').widgetTest({ecart:1500,rate:10},function(){
	$('#db0').html(v1++);
	});
 
});
</script>
</head>
<body>
<div id="test"></div>
<div id="db0"></div>
</body>
</html>

Merci par avance pour vos conseils ,pistes ,suggestions etc … sur la façon de procéder

**Bovino** · 30/10/2010, 20h02

Un grand classique

La fonction que tu définis dans le setTimeout est une fonction anonyme qui sera exécutée après que la fonction l'ayant générée ait terminé son exécution, donc non seulement le contexte de la fonction anonyme est global, donc this représente l'objet window dont j'imagine qu'il ne possède pas de méthode _horloge(), mais de toute façon, le contexte de la fonction appelante a disparu.
Le "truc" consiste à créer une variable (souvent appelée that ou me) qui sera une référence à this :

Code :

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

1
2
var that = this;
idTimer=window.setTimeout(function(){that._horloge()},that.options.rate);

du coup, that étant une référence à this évolue en même temps que this et surtout, la fonction appelée par le timer devant utiliser une variable de la fonction appelante, son contexte est sauvegardé (et donc that) tant que nécessaire

**Edgar** · 31/10/2010, 01h57

Merci Bovino ,

En faisant comme tu l'indiques ça fonctionne impeccable maintenant

,

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<!-- Date de création: 27/10/2010 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery","1.4.2");google.load("jqueryui","1.8.2");</script>
<script type="text/javascript">
(function( $ ) {
$.widget( "flc.widgetTest", {
/*----------------------------*/
   options:{ecart:2000,rate:25,idTimer:null,seuilMs:0,continu:true},
/*----------------------------*/
	_create: function() {
	var	me=this;
	this.options.seuilMs=new Date().getTime()+this.options.ecart;
	this.options.idTimer=window.setTimeout(function(){me._horloge()},this.options.rate);	
 
	},
/*----------------------------*/
	stop: function()
		{ 
		this.options.continu=false;
		},
/*----------------------------*/
	_horloge: function()
		{
		var that=this;
		var getMs=new Date().getTime();
		this.element.text(getMs+' - '+this.options.ecart+' '+this.options.seuilMs); /* histoire d'afficher quelque chose */
		if (getMs>this.options.seuilMs)
			{ 
			this.options.seuilMs=getMs+this.options.ecart;
			that._trigger("complete",null,1);
			}
		if(this.options.continu)
			this.options.idTimer=window.setTimeout(function(){that._horloge()},this.options.rate);	
		else
			window.clearTimeout(this.options.idTimer);
		}
});
 
 
})( jQuery );
 
</script>
 
<script type="text/javascript">
$(document).ready(function(){
var v1=0,v2=0;
$('#test1,#test2').widgetTest({ecart:1500,rate:10},{complete:function(){
	$('#db0').html(v1++);
	}});
$('#test2').widgetTest({ecart:3500,rate:10},{complete:function(){
	$('#db1').html(v2++);
	}});
$("#btStop").click(function(){
	$('#test1').widgetTest('stop');
});
$("#btStop2").click(function(){
	$('#test2').widgetTest('stop');
});
 
});
</script>
</head>
<body>
<div id="test1"></div>
<div id="test2"></div>
<div id="db0"></div>
<div id="db1"></div>
<button id="btStop">stop</button>
<button id="btStop2">stop</button>
</body>
</html>

dans mon exemple de test j'utilise 3 variables que j'ai essayé de passer en public ou private sans succès ,le but étant d'avoir des variables globales à chaques instances , j'ai chérché sur le web sans succès et j'en suis arrivé à déclarer mes variables globales de cette façon

options:{varGlobale1:null,idTimer:null,seuilMs:0,continu:true}

mais je ne suis pas convaincu que ce soit la bonne méthode ?

**Edgar** · 31/10/2010, 09h32

j'ai trouvé ,
sauf erreur pour déclarer une variable globale à l'instance dans un widget il suffit juste d'écrire

Code :

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

1
2
3
 
$.widget( "flc.widgetTest", {maVarGlobale:true,
etc ...

Merci

**danielhagnoul** · 31/10/2010, 09h41

Bonjour

On se croise, je suis justement occupé par la rédaction de la bonne réponse.

Le contenu de l'objet JSON "options" n'est connu qu'a l'intérieur du widget et par les descendants du widget.

Un widget UI doit commencer par les lettres ui.nomDuWidget

Un widget UI doit contenir :

objet: options
fonctions : _create(), destroy(), _setOption(key, value)

Un widget UI contient souvent les fonctions open() et close()

Les options sont manipulables de l'extérieur du widget :

lors de la création du widget
- $("div").draggable({ helper: "clone", axis: "x" });
par les accesseurs (getter) et mutateurs (setter) :
- $("div").draggable("option", "axis", "y");
- var saveAxis = $("div").draggable("option", "axis");

c'est le rôle de _setOption(key, value)

Voir : http://danielhagnoul.developpez.com/...d/password.php

**Edgar** · 31/10/2010, 16h46

Bonjour danielhagnoul ,

Merci pour ces précisions

Envoyé par danielhagnoul

Le contenu de l'objet JSON "options" n'est connu qu'a l'intérieur du widget et par les descendants du widget.

Cela sous entend que c'est dans l'objet JSON que je dois déclarer mes variables globales ?

en tous cas suite à vos conseils j'ai modifié mon code test comme ça

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery","1.4.2");google.load("jqueryui","1.8.2");</script>
<script type="text/javascript">
(function( $ ) {
$.widget( "ui.widgetTest", {
/*----------------------------*/
   options:{ecart:2000,rate:25,idTimer:null,seuilMs:0,continu:true},
/*----------------------------*/
	_create: function() {
	var	that=this;
	this.options.seuilMs=new Date().getTime()+this.options.ecart;
	this._horloge();	
	},
/*----------------------------*/
	destroy:function(){
	this.options.continu=false;	
	},
/*----------------------------*/
	stop: function()
		{
		this.options.continu=false;
		},
/*----------------------------*/
	_horloge: function()
		{
		var that=this,getMs=new Date().getTime();
		this.element.text(getMs+' - '+this.options.ecart+' - '+this.options.seuilMs); /* histoire d'afficher quelque chose */
		if (getMs>this.options.seuilMs)
			{ 
			this.options.seuilMs=getMs+this.options.ecart;
			this._trigger("complete");
			}
		if(this.options.continu)
			this.options.idTimer=window.setTimeout(function(){that._horloge()},that.options.rate);	
		else
			window.clearTimeout(this.options.idTimer);
		},
/*----------------------------*/
	_setOption:function(key, value){ 
 
		switch(key){
			case 'ecart':this.options.ecart = value;break;
			case 'rate':this.options.rate = value;break;
			}
		},
/*----------------------------*/
 
	ecart:function () { return this.options.ecart;},
	rate:function () { return this.options.rate;}	
});
 
 
})( jQuery );
 
</script>
 
<script type="text/javascript">
$(document).ready(function(){
var v1=0;
$('#test1').widgetTest({ecart:1500,rate:1},{complete:function(){
	$('#db0').html(++v1);
	}});
$("#btStop").click(function(){
	$('#test1').widgetTest('stop');
	});
$("#btAddEcart").click(function(){
	$('#test1').widgetTest(
			'option',
			'ecart',
			$('#test1').widgetTest('ecart')+100
		);
	});
 
});
</script>
</head>
<body>
<div id="test1"></div>
<div id="db0">0</div>
<button id="btStop">stop</button>
<button id="btAddEcart">ecart+=100</button>
</body>
</html>

Même si ça existe déjà la finalité pour moi est de développer un carrousel à ma façon ,je réalise que dans mon idée je n'ai pas besoin des éléments de jQuery-ui ,je pense donc qu'il est plus cohérent de repartir sur le même principe mais à partir d'un plugin plutôt qu'un widget.

Mais peut être y'a t'il une raison qui m'échappe qui rend dans ce cas l'utilisation d'un widget plus logique que celle d'un plugin ?

**danielhagnoul** · 31/10/2010, 22h57

Bonsoir

Si vous n'utilisez pas et ne modifiez pas des composants (widgets) jQuery UI, la construction d'un plug-in est certainement plus simple à mettre en oeuvre en effet.

**Edgar** · 01/11/2010, 23h30

Merci ,

Je vais développer deux versions en parallèle ,une plugin ,une widget

Widget avec setTimeout

jQuery

Discussions similaires

Partager

Partager