How do I remove addEventListeners and requestAnimationFrames?

Question

I'm working in a project with a soft page transition and multiple modules. On every transition the removeEventListeners() function in each module is called.

How do I kill all performance-consuming processes? In this case the mousemove listener and the requestAnimationFrame.

I know I can remove the listener of the mousemove event by using a function instead of the arrow function in the addEventListener. But then how do I manipulate the xmouse and ymouse values?


export default class Cursor extends Core {
init() {
        let xmouse;
        let ymouse;
        const friction = 0.125;

        this.$el.addEventListener('mousemove', (e) => {
            xmouse = e.clientX || e.pageX;
            ymouse = e.clientY || e.pageY;
        });


        let x = 0;
        let y = 0;
        let dx = 0;
        let dy = 0;

        const followMouse = function followMouse() {
            requestAnimationFrame(followMouse);

            if (!x || !y) {
                x = xmouse;
                y = ymouse;
            } else {
                dx = (xmouse - x) * friction;
                dy = (ymouse - y) * friction;
                if (Math.abs(dx) + Math.abs(dy) < 0.1) {
                    x = xmouse;
                    y = ymouse;
                } else {
                    x += dx;
                    y += dy;
                }
            }

            cursor.style.left = `${x}px`;
            cursor.style.top = `${y}px`;
        };

        followMouse();
     }
}

removeEventListeners() {
   // Kill all performance-consuming processes of this module.

   // this.$el.removeEventListener('mousemove'); <- there's no function to be removed.
   // cancelAnimationFrame(followMouse); <- followMouse does not exist here
}
}

_"followMouse does not exist here"_ - well then move it to a different scope? Currently you have made it a local variable inside your `init` function. — CBroe, Oct 06 '21 at 06:48
you need to use a named function so you can remove it - https://stackoverflow.com/questions/4402287/javascript-remove-event-listener — Guy Perry, Oct 06 '21 at 06:51
So how do make a variable in this example that is accessible to other functions? — Albert de Beer, Oct 06 '21 at 10:01

score 2 · Answer 1 · answered Oct 06 '21 at 06:54

2

To cancel mouseevent you should not use anonymous callbacks

function handleMousemove(e){
   xmouse = e.clientX || e.pageX;
   ymouse = e.clientY || e.pageY;
}

this.$el.addEventListener('mousemove', handleMousemove)

//.. to cancel mousemove event
this.$el.removeEventListener('mousemove', handleMousemove)

To cancel requestAnimationFrame You need to store id.

// ...
const requestId = requestAnimationFrame(followMouse);

// to cancel `requestAnimationFrame`
cancelAnimationFrame(requestId)

answered Oct 06 '21 at 06:54

bogdanoff

1,705
1
10
20

Thanks. It is a scoping issue for sure. However, I don't get how I can call cancelAnimationFrame(followMouse) within RemoveEventListeners() function since the followMouse const is declared in a different function. – Albert de Beer Oct 06 '21 at 07:41
Store Id in global space (inside init will be good option if you declare `removeEventListeners` inside init) and use `var` or `let` to store `requestId` – bogdanoff Oct 06 '21 at 11:06

How do I remove addEventListeners and requestAnimationFrames?

1 Answers1