JS function started to execute in lesser time when it is called again

Question

I needed to call a function continuously after a time interval, so I followed the solution provided on this link.

Here is JS code.

    function displayLiveLocation()
    {
        var location = new Array();
        var currentcord = new Array();
        $('input[type=checkbox][name="IMSeries[]"]:checked').each(function() {
           location.push($(this).val()); 
           var current = $(this).val();
           currentcord.push($('#'+current+'_H').val());
        }); 
        copyofAutotrack(currentcord , location);
        setTimeout(function() {
            display();
        }, 15000);

    }

Here is HTML code.

   <div class="checkbox"> 
    <input type="checkbox" onclick="displayLiveLocation()" value="0358911020092058" name="IMEISeries[]" class="IMEISeriesClass[]">       
    <input type="hidden" value="26.79997253418,75.799194335938" id="0358911020092058_H"> 
   </div>

There are multiple checkboxes and hidden fields with unique id similar to above one. When a checkbox is clicked, respective function starts executing at interval of 15 seconds. However, same thing happens when another checkbox is clicked, making that function execute at lesser time interval as another call to function is made. I want this function to be executed at 15 seconds only. Any help would be appreciated. Thanks in advance.

I did not know how to search this website about this, so I asked the question.

learn how to use `clearTimeout()` – charlietfl Oct 17 '15 at 12:16 — charlietfl, Oct 17 '15 at 12:16

score 2 · Accepted Answer · answered Oct 17 '15 at 12:41

When you click the checkbox another time before the first timeout has executed, the timeout from the first click will happens 15 seconds after the first click, but with the data from the second click.

If you want them to happen separately with their own sets of data, you would send the data into the function when you call it instead of having it using the current data:

function displayLiveLocation()
{
    var location = new Array();
    var currentcord = new Array();
    $('input[type=checkbox][name="IMSeries[]"]:checked').each(function() {
       location.push($(this).val()); 
       var current = $(this).val();
       currentcord.push($('#'+current+'_H').val());
    }); 
    copyofAutotrack(currentcord, location);
    setTimeout(function() {
        display(currentcord, location);
    }, 15000);

}

If you instead want to stop the first timeout completely and just wait for the second timeout, you would use clearTimeout:

var displayTimeout = null;

function displayLiveLocation()
{
    var location = new Array();
    var currentcord = new Array();
    $('input[type=checkbox][name="IMSeries[]"]:checked').each(function() {
       location.push($(this).val()); 
       var current = $(this).val();
       currentcord.push($('#'+current+'_H').val());
    }); 
    copyofAutotrack();
    if (displayTimeout != null) {
      clearTimeout(displayTimeout);
    }
    displayTimeout = setTimeout(function() {
        displayTimeout = null;
        display(currentcord, location);
    }, 15000);

}

Reeno · Answer 2 · 2015-10-17T12:46:45.150

Everytime a checkbox is clicked, a new timeout is started. If a user clicks 3 checkboxes within a few seconds, 3 timeouts are called and run shortly after another.

A solution is, to stop the last timeout before you call a new one with clearTimeout:

var timeoutActive = false; // status of the timeout

function displayLiveLocation()
{
    // your code

    window.clearTimeout(timeoutActive); // cancels the last timeout
    timeoutActive = window.setTimeout(function() { // sets the new timeout and saves the status in the global variable timeoutActive
        display();
    }, 15000);

}

JS function started to execute in lesser time when it is called again

2 Answers2