Using setInterval causes page to slow down.

[DaveRich]

So I am having a bit of an issue with some code.

At present I am using a jQuery UI slider bar to represent a date, and then I am manipulating it using some JS functions.

The user can click `Next`, `Previous` to increment or decrement the month value and adjust the slider bar, these two functions work as desired.

However I have also added in a cycle function, which will continue to advance the date until it has reached the current month.

This cycle function when executing takes up a HUGE amount of resources and seems to be slowing down the rest of the page to a crawl. After executing the cycle function for even 5-10 iterations tooltips become unresponsive and the page doesn`t respond to clicks.

I`m just wondering if there`s a way to do a delay that does not involve setInterval.

Here is my code:

function cycle()
{
     if(CYCLEINT != null)
     {
          window.clearInterval(CYCLEINT);
          CYCLEINT = null;
          document.getElementById("cycle").innerHTML = "Cycle";
     }
     else
     {
          CYCLEINT = self.setInterval("nextMonth()", 1000);
          document.getElementById("cycle").innerHTML = "Pause";
     }
}

function nextMonth()
{
     var dVal = $( ".slider" ).slider( "option", "value");
     if(dVal < dateMax)
     {
          dVal++;
          $( ".slider" ).slider( "option", "value", dVal );
          refresh();
     }

     if(CYCLEINT != null && dVal >= dateMax)
    {
        cycle();
    }
}

[Logic Ali]

It is inadvisable to have an ID that clashes with a global object, i.e. "cycle".

How is this code initialised?

What does refresh() do?

[DaveRich]

refresh calls a list of functions that update a graph / data table pertaining to a new set of data.

So:
1. graph shows some data.
2. whenever the date is updated (for example via the slider bar)
3. the refresh function will call methods to update a map, a graph, and data table with the new data pertaining to that date.

I wasn't aware that there was a global object named "cycle". I have made this change yet am still faced by the slowing down of the page when my new function "changeMapDate" is called.

Would it be possible to implement jQuery's "delay" function in this case?

[DaveRich]

bump