In MapBox GL JS, how do I prevent pop-up labels from constantly showing up when I don't want to see them?

Question

I have made an application with MapBox GL JS. I have tons of markers all over the world. When the mouse cursor hovers over them, I have them pop up a box with a description. This is normally what I want, but when zooming in/out and moving around the map, I frequently see these labels flickering as they are displayed and hidden while the mouse cursor moves around. This is very annoying.

I'm trying to find a good and simple way to prevent this, perhaps by requiring some amount of milliseconds of hovering over the marker before this happens. Or perhaps by using some sort of built-in "is the mouse cursor still or moving around" flag. I do not want to require me to actually click the labels, because that would soon become even more annoying.

I currently use this code:

map.on('mouseenter', layerId, (e) =>
{
    map.getCanvas().style.cursor = 'pointer';
    const coordinates = e.features[0].geometry.coordinates.slice();
    const description = e.features[0].properties.description;
    const name = e.features[0].properties.name;
    while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) { coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360; }
    popup.setLngLat(coordinates).setHTML(name).addTo(map);
});

map.on('mouseleave', layerId, () =>
{
    map.getCanvas().style.cursor = '';
    popup.remove();
});

This must be a common problem. Do you know about, or can you think of, some way to solve this which isn't annoying? If I have to hover the cursor standing still above the label to show it, I might as well require a click. But that's already disqualified. Plus I already use the click event for a different thing ("open related URL").

Answer 1

Debounce your callback function in the 'mouseenter' listener.

Read more about debouncing functions in Javascript.