Créer un bouton 2 en 1 qui appel un JS externe

Version imprimable

Bonjour,

Malheureusement nul en JS, j'ai besoin d'aide pour créer un bouton 2 en 1 (bouton on/off) qui fait appel à un JS externe.

Ce bouton fait correctement appel à un JS non lancé au démarrage de la page pour économiser des requêtes et ressources.
Par contre, je n'arrive pas à faire le contraire, c'est à dire arrêter le JS appelé et le "décharger".
J'ai tenter avec le bouton toggle cependant je ne crois pas qu'il enlève le JS en fond de tâche.

Idéalement j'ai besoin d'un bouton marche/arrêt qui appel et retire le JS externe.
Si c'est impossible, 2 boutons marche/arrêt pourrais faire l'affaire.

JS
Code:

1 2 3 4 5 6 7 8 9 10 11 function loadScript(script_url){ var head= document.getElementsByTagName('head')[0]; var script= document.createElement('script'); script.type= 'text/javascript'; script.src= script_url; head.appendChild(script); } function toggleDiv(divId) { $("#"+divId).toggle(); }
HTML
Code:

1 2 3 4 <input type="button" onclick="loadScript('http://4bc5875dcd.url-de-test.ws/v5/js/sakura.js');" value="Start" /> <input type="button" onclick="javascript:toggleDiv('sakura');" value="Toggle" /> <p> <div onclick="loadScript('http://4bc5875dcd.url-de-test.ws/v5/js/sakura.js');">Bouton 2 en 1</div>
Possibilité de tester et modifier sur http://codepen.io/anon/pen/Grpnb

Merci pour votre temps.

21/08/2014, 11h46
SylvainPV

Qu'est-ce que tu veux dire par "décharger un script" ? Un script c'est comme un texte, on le lit de haut de bas en suivant les instructions. A la rigueur, si le script met des variables en RAM, tu peux manuellement les dés-instancier pour demander à ce que la RAM soit libérée mais à part ça, je ne vois pas trop l'intérêt...

En tout cas ça n'a strictement rien à voir avec la fonction toggle de jQuery, qui se contente d'afficher/masquer un élément HTML.
22/08/2014, 18h35
kunpen

Merci pour ta réponse SylvainPV
En effet j'ai un peu de mal à assimiler le mécanisme car d'habitude on met
- un JS mélé dans le code html (ou autres) d'une page qui va se lancer au chargement de la page.
ou
- on appel un fichier script.js à part qui ca également se lancer au chargement de la page.
Il existe des techniques pour assurer un chargement de page rapide et exécuter le JS avant la balide </body> ou alors un chargement asynchrone, etc...

La différence ici c'est que la page se charge sans lancer le JS en même et c'est ce que je souhaite.
Puis quand on appuis sur un bouton on appel un fichier script.js à part qui se lance.
Le script est lu et exécuté, jusque la c'est parfait.

Puis j'aimerai bien qu'en appuyant sur ce même bouton, le JS soit arrêté et qu'il ne prenne plus de ressources,
d'ou ce que j'appel de "décharger" c'est à dire retirer le JS externe qu'on à appelé précédemment.
Ou tout simplement l'arrêter totalement devrais suffire normalement enfin tout dépend des JS je crois.

Quand au toggle, tu a raison, ça ne fait que afficher ou masquer et du coup ça prend des ressources car le script tourne en fond quand même et
c'est justement ce que je ne souhaite pas.

Une solution les ga ?
25/08/2014, 10h07
SylvainPV

Citation:

Envoyé par kunpen

en appuyant sur ce même bouton, le JS soit arrêté et qu'il ne prenne plus de ressources

Je pense que tu as une mauvaise conception de comment fonctionne JavaScript. "Arrêter le JS" ne veut pas dire grand chose, tu peux certes stopper l'exécution d'un script au milieu entre deux instructions, mais une fois que le moteur a exécuté toutes les instructions du script, il ne prend plus de ressources CPU puisqu'il n'y a plus d'instructions à exécuter.

Après, un script exécuté laisse toujours une empreinte : variables déclarées dans la RAM, attachement d'écouteurs d’événements sur le document, timers etc... Faire le nettoyage complet de cette empreinte est très compliqué et, à vrai dire, plutôt inutile. Le garbage collector des moteurs JavaScript fait très bien le boulot à notre place.
26/08/2014, 12h22
kunpen
Si le JS est chargé dans la RAM ce n'est pas bien grave, par contre le JS exécuté prend des ressources CPU , il doit bien exister une méthode pour stopper son exécution non ?
un truc du genre ça pourra marcher ?
http://www.developpez.net/forums/d11...on-javascript/

ou j'ai ajouté ce script qui à l'air de fonctionner qu'une seule fois et je suis obligé de faire un 2ème bouton
HTML

Code:

<button onclick="myFunction()">Stop</button>

JS
Code:

1 2 3 4 5 function myFunction() { var list=document.getElementById("sakura"); list.removeChild(list.childNodes[0]); }
removeChild() semble être la solution, cependant comment faire un bouton 2 en 1 ? Et comment s'assurer que le bouton stop fonctionne à chaque fois ?

Possibilité de tester et modifier sur http://codepen.io/anon/pen/wGLnl
26/08/2014, 14h49
kunpen

Je viens de trouver la fonction remove ça à l'air de mieux fonctionner, par contre je ne sait si c'est "propre" comme code ^^
Il reste plus qu'a faire le bouton 2 en 1, des solutions SVP ?

Résultat visible sur http://codepen.io/anon/pen/wGLnl Bouton "retirer"

Je pense que j'ai enfin trouvé la solution !
Possibilité de tester et modifier sur http://codepen.io/anon/pen/hlcGp
Bon, je ne crois pas que cela fonctionne sous IE mais ce n'est pas une grosse perte...
Par contre j'ai testé sur Firefox et Chrome et ça à l'air de fonctionner :)

HTML

Code:

1
2
3
4
5
Div Sakura d'un JS externe
<div>
<input type="checkbox" value="Off" id="onoff" onclick="onoff();" name="switch2" class="sa" checked="checked" /> 
<label for="onoff" class="ro-sa"></label>    
</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function onoff(){
  currentvalue = document.getElementById('onoff').value;
  if(currentvalue == "Off"){
    document.getElementById("onoff").value="On"; 
    var head= document.getElementsByTagName('head')[0];
    var script= document.createElement('script');
    script.type= 'text/javascript';
    script.src= 'http://4bc5875dcd.url-de-test.ws/v5/js/sakura.js';
    head.appendChild(script);
  } 
  else{
    document.getElementById("onoff").value="Off";
    document.getElementById('sakura').remove();
    this.remove();
  }
}

CSS

Code:

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
body {
  background-color: #525A73;
  color: #fff;
}
 
input.sa:empty
{
	margin-left: -999px;
}
 
input.sa:empty ~ label
{
	position: relative;
	float: left;
	line-height: 1.6em;
	text-indent: 4em;
	width: 36px; height: 37px;
	cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
 
input.sa:empty ~ label:before, 
input.sa:empty ~ label:after
{
	position: absolute;	
	top: 0;
	bottom: 0;
	left: 0;
	content: ' ';	
	border: 0px solid transparent;
	border-radius: 25px;
	box-shadow: 0 1px 3px #000, 0 2px 13px #000;
	box-shadow: inset 0 0.2em 0 rgba(0,0,0,0.3);
  -webkit-transition: all 100ms ease-in;
  transition: all 100ms ease-in;
  width: 36px; height: 37px;
}
 
input.sa:empty ~ label:after
{
background: url('http://4bc5875dcd.url-de-test.ws/v5/images/sp-sakura.png') 0px -38px no-repeat;
width: 36px; height: 37px;
}
 
input.sa:checked ~ label:before
{
width: 36px; height: 37px;   
}
 
input.sa:checked ~ label:after
{
	background: url('http://4bc5875dcd.url-de-test.ws/v5/images/sp-sakura.png') 0px 0px no-repeat;
  width: 36px; height: 37px;
}
 
.ro-sa{
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
 
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;  
 } 
 
.ro-sa:hover  
{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
}

Bon mon code doit être un peu "sale" donc si pourriez m'aider à le rendre plus "propre" ce serait sympa de vôtre part ^^
Idem pour le rendre compatible crossbrowser ce serait super.

Enfin bref je suis très satisfait et le laisse non résolu dès fois qu'il y aurai des améliorations à apporter...

26/08/2014, 22h09
SylvainPV

Tout ce que fait ton script, c'est supprimer un élément HTML... Il aurait fallu être un peu plus clair sur ce que tu voulais :roll: