Javascript: End whole function and event listeners on condition
I have a function that contains other functions and event listeners. How can I end/exit them all when a condition is met?
The function is called when a button is clicked and adds points on click-events and then visualizes a line. Now I want to stop the function "drawLine" when a maximal amount of points is reached or when the line is closed (selected point == first point).
A return statment at the beginning did not fix that for me:
The function:
drawLine() {
if(buildingPts.length >= 5)
{
console.log("Max points reached")
return
}
var line;
//Raycaster for drawing tool
const raycaster = new THREE.Raycaster()
var plane = new THREE.Plane( new THREE.Vector3( 0, 0, 1), 0 );
const clickMouse = new THREE.Vector2()
//Geometry
var geometry = new THREE.BufferGeometry();
var MAX_POINTS = 500;
var positions = new Float32Array(MAX_POINTS * 3);
geometry.addAttribute('position', new THREE.BufferAttribute(positions, 3));
//Material
var material = new THREE.LineBasicMaterial({ color: 0xff0000, linewidth: 2 });
//Line
line = new THREE.Line(geometry, material);
scene.add(line);
window.addEventListener("mousemove", onMouseMove, true);
window.addEventListener('mousedown', onMouseDown, true);
function updateLine() {
positions[count * 3 - 3] = pos.x;
positions[count * 3 - 2] = pos.y;
positions[count * 3 - 1] = pos.z;
line.geometry.attributes.position.needsUpdate = true;
}
//Mouse move handler
function onMouseMove(event) {
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
mouse.z = 0;
raycaster.setFromCamera( mouse, camera );
var intersects = new THREE.Vector3();
let planeIntersect = raycaster.ray.intersectPlane( plane, intersects );
pos = new THREE.Vector3( Math.round(planeIntersect.x), Math.round(planeIntersect.y), 0);
mouse.unproject(camera);
if( count !== 0 ){
updateLine();
}
}
//Add point
function addPoint(event){
console.log("point nr " + count + ": " + pos.x + " " + pos.y + " " + pos.z);
positions[count * 3 + 0] = pos.x;
positions[count * 3 + 1] = pos.y;
positions[count * 3 + 2] = pos.z;
buildingPts.push(pos)
count++;
line.geometry.setDrawRange(0, count);
updateLine();
}
//Mouse down handler
function onMouseDown(evt) {
// on first click add an extra point
if( count === 0 ){
addPoint();
}
addPoint();
}
},
animate() {
renderer.setAnimationLoop(() => {
composer.render();
renderer.render(scene, camera);
});
},
Solution 1:
If you want to stop any event listeners you can use removeEventListener
to stop.
Ex below,
function handleTimeUpdate() {
var sss = parseInt(mediaplay_video.currentTime % 60);
show_second();
}
mediaplay_video.addEventListener('timeupdate', handleTimeUpdate, false);
...
mediaplay_video.removeEventListener('timeupdate', handleTimeUpdate);
Solution 2:
From what I can see and understand, you are using THREE.js which suggests me that you are using some kind of an event loop like requireAnimationFrame
.
If you are calling drawLine()
inside that, you need to specify the condition inside the requireAnimationFrame
function.
Example
requireAnimationFrame(() => {
if(condition)
drawLine()
})
However, as you mentioned, to remove event listeners, we use removeEventListener
function to remove a specific listener.