1
votes

répéter une fonction dans une autre fonction

Je me répète mal. Je souhaite améliorer mon code. Vous voyez que je resélectionne tous les mêmes boutons et actions dans la seconde moitié de mon code. Comment réutiliser la première fonction dans ma fonction myvideo2.addEventListener ("completed") ?

document.querySelector("#AButton").addEventListener("click", function(){                                                                     
  document.querySelector("#videoSphere").setAttribute("src", "video/BlivingRoom1.mp4");       
  if (myvideo2.paused) {
    myvideo2.play();
    console.log("playing BlivingRoom1");
    document.querySelector("#AButton").emit("disappear");                                      
    document.querySelector("#BButton").emit("disappear");
    document.querySelector("#DButton").emit("disappear");
    document.querySelector("#EButton").emit("disappear");
    document.querySelector(".popUpTextIcon1").setAttribute("visible", false);
    document.querySelector("#CButton").emit("move-start");                                
    document.querySelector(".popUpVideoHotspot1").emit("move-start");
  }
  myvideo2.addEventListener("ended", function(){
    document.querySelector("#AButton").emit("disappear");                                      
    document.querySelector("#BButton").emit("disappear");
    document.querySelector("#DButton").emit("disappear");
    document.querySelector("#EButton").emit("disappear");
    document.querySelector("#CButton").emit("move-start");                               
    document.querySelector("#popUpTextIcon1").setAttribute("visible", false);
    document.querySelector(".popUpVideoHotspot1").emit("move-start");
    myvideo2.play();                                                                           
  });
});

javascript aframe

4 commentaires

S'il vous plaît, s'il vous plaît, veuillez tenir compte de cette meilleure pratique qui a été ignorée dans chaque réponse fournie: N'appelez pas document.querySelector () (ou toute fonction que vous n'avez pas à appeler) à chaque événement

Compris!!. Mais que se passe-t-il si je dois interrogerSélectionnez de nombreux boutons, et chacun d'entre eux fait une chose différente. cela signifie-t-il que créer des variables est mieux?

Oui, créer une variable en exécutant cette méthode une seule fois est mieux que d'exécuter la même méthode encore et encore et encore et (vous l'avez :-). Ces nœuds DOM sont statiques et obtenir une référence à eux une fois est tout ce qui est nécessaire. Ensuite, utilisez simplement la référence. Personnellement, j'utiliserais une collection DOM via document.querySelectorAll () ou document.getElementsByClassName () - alors vous pouvez les parcourir au fur et à mesure que vous devez les "disparaître" ou autre .

Veuillez me voir répondre ci-dessous ...

6 Réponses :

1
votes

Vous devez extraire une fonction et l'appeler aux deux endroits.

function configurePlayer() {
    document.querySelector("#AButton").emit("disappear");                                      
    document.querySelector("#BButton").emit("disappear");
    document.querySelector("#DButton").emit("disappear");
    document.querySelector("#EButton").emit("disappear");
    document.querySelector(".popUpTextIcon1").setAttribute("visible", false);
    document.querySelector("#CButton").emit("move-start");                                
    document.querySelector(".popUpVideoHotspot1").emit("move-start");
}

document.querySelector("#AButton").addEventListener("click", function(){                                                                     
  document.querySelector("#videoSphere").setAttribute("src", "video/BlivingRoom1.mp4");       
  if (myvideo2.paused) {
    myvideo2.play();
    console.log("playing BlivingRoom1");
    configurePlayer();
  }
  myvideo2.addEventListener("ended", function(){
    configurePlayer();
    myvideo2.play();                                                                           
  });
});

0 commentaires

0
votes

J'écrirais quelque chose comme ceci (en es6):

const aButton = document.querySelector("#AButton")
const btns = ["#AButton", "#BButton", "#CButton", "#DButton", "#EButton"]

aButton.addEventListener("click", function(){                                                                     
document.querySelector("#videoSphere").setAttribute("src", "video/BlivingRoom1.mp4");       
if (myvideo2.paused) {
  myvideo2.play();
  console.log("playing BlivingRoom1");
  makeDisappear(btns)
  doStuff()

}
myvideo2.addEventListener("ended", function(){
  makeDisappear(btns)
  doStuff()
  myvideo2.play();                                                                           
});
});

const makeDisappear = (btns) => {
  btns.forEach(btn => document.querySelector(btn).emit("disappear"))
}

const doStuff = () => {
  document.querySelector("#CButton").emit("move-start");  
  document.querySelector(".popUpTextIcon1").setAttribute("visible", false);                              
  document.querySelector(".popUpVideoHotspot1").emit("move-start");
}

0 commentaires

0
votes

Vous pouvez simplement déclarer une fonction au préalable, comme:

let myElement = document.querySelector("#AButton");
let myEvent = "click"
myElement.addEventListener(myEvent, myFunction);

... puis l'appeler dans addEventListener comme:

function myFunction(){
  document.querySelector("#AButton").emit("disappear");                                      
  document.querySelector("#BButton").emit("disappear");
  document.querySelector("#DButton").emit("disappear");
  document.querySelector("#EButton").emit("disappear");
  document.querySelector("#CButton").emit("move-start");                               
  document.querySelector("#popUpTextIcon1").setAttribute("visible", false);
  document.querySelector(".popUpVideoHotspot1").emit("move-start");
}

C'est en fait le but principal des fonctions, et les fonctions anonymes sont une exception qui est parfois pratique.

0 commentaires

1
votes

Ce que vous faites, c'est créer deux fois une "fonction anonyme". Vous pouvez facilement créer une fonction "nommée" normale et l'appeler dans vos 2 sélecteurs. Cela ressemblerait à:

// a named function **
function dealWithMyButtons() {
    document.querySelector("#AButton").emit("disappear");                                      
    document.querySelector("#BButton").emit("disappear");
    document.querySelector("#DButton").emit("disappear");
    document.querySelector("#EButton").emit("disappear");
    document.querySelector("#CButton").emit("move-start");                               
    document.querySelector("#popUpTextIcon1").setAttribute("visible", false);
    document.querySelector(".popUpVideoHotspot1").emit("move-start");
    if(myvideo2) {
        myvideo2.play();                                                                           
    } else {
        console.log('ERROR: NO myvideo2 to .play()');
    }
}
    
document.querySelector("#AButton").addEventListener("click", function(){                                                                     
    document.querySelector("#videoSphere").setAttribute("src", "video/BlivingRoom1.mp4");       
    if (myvideo2.paused) {
        console.log("playing BlivingRoom1");
        dealWithMyButtons(); // call the function**
    }
    myvideo2.addEventListener("ended", dealWithMyButtons); // listen for event, and call the function** when it occurs
});

0 commentaires

0
votes

Si vous faites tout cela dans un composant personnalisé AFRAME , vous pouvez définir une méthode personnalisée

init: function() {
   if (myvideo2.paused) {
     myvideo2.play()
     this.stuff()
   }
   myvideo2.addEventListener("ended", this.stuff)
},
stuff: function() {
   // whatever you need to do
}

et appeler simplement le truc de init:

AFRAME.registerComponent('foo' ,{
  init: function() {},
  stuff: function() {}
})

Comme je l'ai fait ici .

0 commentaires

1
votes

Vous devrez changer les variables en noms d'identifiants qui ont un sens pour votre application. Le code ci-dessous sépare les pièces mobiles afin que le code soit plus propre et plus facile à rationaliser. Les effets secondaires (changement de DOM) sont maintenant isolés à une seule fonction. Tous les éléments DOM affectés sont clairement identifiés à l'avant. Il n'y a pas de duplication ici et ce code est beaucoup plus performant que des appels répétés à document.querySelector () .

Matière à réflexion.

La première ligne de code attend chaque nœud "disparaissable" pour avoir un attribut de données personnalisé nommé données-disparaissables . Il n'est pas nécessaire qu'il ait une valeur.

const disapperable = document.querySelectorAll('[data-disappearable]');
const moveStartable = document.querySelector("#CButton");
const clickableButton = document.querySelector("#AButton");
const videoSphere = document.querySelector("#videoSphere");
const popupTextIcon = document.querySelector(".popUpTextIcon1");
const popupVideoHotspot1 = document.querySelector(".popUpVideoHotspot1");

function changePlayState() {
  myvideo2.play();
  disappearable.forEach(el => el.emit("disappear"));
  moveStartable.emit("move-start");
  popupTextIcon.setAttribute("visible", false);
  popupVideoHotspot1.emit("move-start");

}

clickableButton.addEventListener("click", function() {
  videoSphere.setAttribute("src", "video/BlivingRoom1.mp4");
  if (myvideo2.paused) {
    changePlayState();
  }
});

myvideo2.addEventListener("ended", function() {
  changePlayState();
});

0 commentaires