Limiting the Frequency of Event Triggers: How to Improve Efficiency

Question

Limiting the Frequency of Event Triggers: How to Improve Efficiency

let time = null;
let bounds = null;
google.maps.event.addListener(map,'bounds_changed',function(){
    bounds = map.getBounds();
    time = (new Date()).getTime();
    setTimeout(function(){
        let now = ((new Date()).getTime() - 999);
        if(now > time){
            console.log('now: '+now+ ' then: '+time+ ' diff: '+(now-time));
            // here I want to fire an event exactly 1 time instead of a baizllion
            alert('I just want to see this once after the map was moved');
        }
    },1000);
});

Essentially, when the map changes, the bounds_changed event seems to trigger quite frequently. My assumption that declaring time outside would prevent it from being overwritten may be incorrect.

javascript google-maps-api-3

Answer 1

Answer №1

Have you experimented with using the dragend event if you are solely dragging the map?

In other cases, a widely-used approach to deal with this issue is by utilizing a shared Timer. It seems like you are on the right track based on your code snippet.

Each time the bounds_changed event gets triggered, the timer is reset and once it reaches the set time limit, your desired function will be executed. The key is to extract the timer logic and make it accessible to all instances of the bounds_changed events.

Here is the link to APIv3

Updates:

You may want to consider trying the following implementation:

function fireEvent()
{
    if (lastEvent.getTime() + 500 <= new Date().getTime())
    {
        //your event
    }
}

function DelayedCallback()
{
    lastEvent = new Date();
    setTimeout(fireEvent, 500);
}
event.addListener(map, "bounds_changed", DelayedCallback);

Extracted from this source

Answer 2

Have you experimented with using the dragend event if you are solely dragging the map?

In other cases, a widely-used approach to deal with this issue is by utilizing a shared Timer. It seems like you are on the right track based on your code snippet.

Each time the bounds_changed event gets triggered, the timer is reset and once it reaches the set time limit, your desired function will be executed. The key is to extract the timer logic and make it accessible to all instances of the bounds_changed events.

Here is the link to APIv3

Updates:

You may want to consider trying the following implementation:

function fireEvent()
{
    if (lastEvent.getTime() + 500 <= new Date().getTime())
    {
        //your event
    }
}

function DelayedCallback()
{
    lastEvent = new Date();
    setTimeout(fireEvent, 500);
}
event.addListener(map, "bounds_changed", DelayedCallback);

Extracted from this source

Limiting the Frequency of Event Triggers: How to Improve Efficiency

Answer №1

Similar questions

Ways to recover HTML elements that have been eliminated by jQuery's remove

Trigger an alert when a button is clicked and redirect the user to an newly opened tab

Modify mesh in three.js scene

Discover the status of appcache on a webpage even without a manifest file by utilizing an iframe

To avoid any sudden movements on the page when adding elements to the DOM using jQuery, is there a way to prevent the page from

Why do React components require immutable props when values are passed by value regardless?

How can we pass the onClick prop from a child component to a parent component in React with Typescript?

Trouble with X-editable: Unable to view values when editing and setting values using J

Is there a way to set the background image to scroll vertically in a looping pattern?

A guide on organizing a JSON object in JavaScript/AngularJS through grouping

Recharge the Div

Retrieve the width and height of the browser once the user has adjusted the window size

Leveraging greensock with browserify

Is there a way to obtain the Base64 data following the conversion of a div to an image?

What is the best way to position a static element next to a Vue draggable list?

What methods are available for updating the href color of an element using the DOM?

Seeking help with executing JQuery Ajax functions within a foreach loop

What are the steps to switch the dropdown values?

Tips for maintaining the data in localStorage when the app is rendering

Guide on displaying a list of images in a single line with rows and columns