Destroying d3 event listeners
We can't let our event listeners hang around forever - we learn how to clean up after ourselves and cancel old ones.
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the Fullstack D3 Masterclass course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
[00:00 - 00:13] So before we add event listeners to our charts, let's talk about how to destroy our event listeners. This is important because if you have too many event listeners, you're using memory that way.
[00:14 - 00:30] You could create some memory leaks and you might retain events that you don't want to trigger. So we're back to this example we just played with where our rectangles turn different colors when we hover them.
[00:31 - 00:42] So let's say that after three seconds, we don't want to have this interaction anymore. So to do something after three seconds, we can create a set timeout.
[00:43 - 00:56] And this first element is a callback function, the second one is going to be the number of milliseconds until we run that callback function. So 3000 milliseconds is one second.
[00:57 - 01:08] So after this time's out, let's just log out high to make sure that it's doing what we need. Below the page, it'll wait three seconds and then log out.
[01:09 - 01:36] Hi. All right, so after three seconds, let's go ahead and cancel these mouse center and mouse leap event listeners. And it's really easy actually to do this. We basically just pretend we're creating a new method and then instead of a callback function, we send back null.
[01:37 - 01:56] So we want to do that for the mouse enter event listener and also the mouse leave event listener. So this should work until about three seconds and then I'm hovering over these boxes, but none of them are turning that color.
[01:57 - 02:16] One thing you might notice is that if you're hovered over a box when that timeout function calls, this box is going to be stuck in that state because this mouse leave function is never run. We just canceled the mouse leave function. So it just stays that color from the array.
[02:17 - 02:33] And the easy way to fix this is to just trigger a mouse leave function before or after really we cancel these these enter and leave. Actually, I asked you for.
[02:34 - 03:00] So to do that, we want to use dispatch, which is another method for our G3 selection objects. And we just want to dispatch a mouse leave function. So even if we're hovered over that box and our time runs out, we're dispatching that mouse leave function so that even though this is hovered, it'll turn back to that light gray.
[03:01 - 03:10] So this is basically go back to before we had any of this interaction code where nothing really happens when I mouse over a mouse leave.