删除事件Javascript

Question

我正在第8面墙上工作，设计一种交互式增强现实体验。我正在组合此页面中的代码https://www.8thwall.com/8thwall/placeground-aframe/master/tap-place.js当我点击屏幕时，我可以在那里放置一个三维对象。现在我想让它们在x时间后消失。提前谢谢。

export const tapPlaceComponent = {
init() {
const ground = document.getElementById('ground')
ground.addEventListener('click', (event) => {
// Create new entity for the new object
const newElement = document.createElement('a-entity')
// The raycaster gives a location of the touch in the scene
const touchPoint = event.detail.intersection.point
newElement.setAttribute('position', touchPoint)
// const randomYRotation = Math.random() * 360
newElement.setAttribute('rotation', `0 0 0`)
newElement.setAttribute('visible', 'false')
newElement.setAttribute('scale', 'false')
newElement.setAttribute('shadow', {
receive: false,
})
newElement.setAttribute('gltf-model', '#heartModel')
this.el.sceneEl.appendChild(newElement)
newElement.addEventListener('model-loaded', () => {
// Once the model is loaded, we are ready to show it popping in using an animation
newElement.setAttribute('visible', 'true')
newElement.setAttribute('animation', {
property: 'scale',
to: '7 7 7',
easing: 'easeOutElastic',
dur: 800,
})
})
})
},
}
setTimeout(tapPlaceComponent, 500)

Answer 1

setTimeout应该在创建新元素的函数内部，并且应该移除元素。

setTimeout的第一个参数必须是函数，tapLaceComponent是对象。

export const tapPlaceComponent = {
init() {
const ground = document.getElementById('ground')
ground.addEventListener('click', (event) => {
// Create new entity for the new object
const newElement = document.createElement('a-entity')
// The raycaster gives a location of the touch in the scene
const touchPoint = event.detail.intersection.point
newElement.setAttribute('position', touchPoint)
// const randomYRotation = Math.random() * 360
newElement.setAttribute('rotation', `0 0 0`)
newElement.setAttribute('visible', 'false')
newElement.setAttribute('scale', 'false')
newElement.setAttribute('shadow', {
receive: false,
})
newElement.setAttribute('gltf-model', '#heartModel')
this.el.sceneEl.appendChild(newElement)
newElement.addEventListener('model-loaded', () => {
// Once the model is loaded, we are ready to show it popping in using an animation
newElement.setAttribute('visible', 'true')
newElement.setAttribute('animation', {
property: 'scale',
to: '7 7 7',
easing: 'easeOutElastic',
dur: 800,
});
// Remove after 2 seconds
setTimeout(() => newElement.remove(), 2000);
})
})
},
}