Question

我很难过地重复自己。我想改善我的代码。您会看到我在代码的后半部分重新选择了所有相同的按钮和操作。如何重用myvideo2.addEventListener("ended")函数中的第一个函数？

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();                                                                           
  });
});

Answer 1

您需要提取一个函数并在两个地方都调用它。

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();                                                                           
  });
});

Answer 2

您正在做的是两次创建一个“匿名函数”。您可以轻松创建一个普通的“命名”函数，并在2个选择器中调用它。看起来像：

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

Answer 3

您必须将变量更改为对您的应用程序有意义的标识符名称。下面的代码将各个活动部分分开，因此代码更简洁，更合理。现在，将副作用（更改DOM）隔离为一个功能。所有受影响的DOM元素都可以在前面清楚地识别。这里没有重复，并且此代码比重复调用const json = new ObservableArray具有更高的性能。

令人回味的食物。

第一行代码期望每个“不可见”节点都具有名为document.querySelector()的自定义数据属性。它不必具有值。

data-disappearable

Answer 4

我会在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");
}

Answer 5

您可以简单地预先声明一个函数，例如：

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

...然后在addEventListener中调用它，例如：

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

这实际上是函数的主要目的，匿名函数是一个有时很方便的例外。

Answer 6

如果要在AFRAME自定义组件中执行所有操作，则可以定义自定义方法

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

，只需从stuff调用init方法：

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

就像我做了here。

在另一个函数中重复一个函数

6 个答案: