www.webdeveloper.com
Results 1 to 4 of 4

Thread: Using setInterval causes page to slow down.

  1. #1
    Join Date
    Jul 2011
    Posts
    54

    Using setInterval causes page to slow down.

    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:
    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();
        }
    }

  2. #2
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    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?

  3. #3
    Join Date
    Jul 2011
    Posts
    54
    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?

  4. #4
    Join Date
    Jul 2011
    Posts
    54
    bump

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles