setInterval not working properly on Chrome

by

Chrome (and apparently the latest versions of Firefox too) reduce the speed of setInterval when the tab is in the background to improve foreground performance. This probably matters the most when there are fast running timer-driven animations in background pages. When the page comes back to the foreground, it “tries” to catch up and runs a bunch of setInterval calls much faster than they would normally run.

The work-arounds are:

  1. Lengthen the time of the setInterval so Chrome won’t mess with it (you’d have to look up what that time is).
  2. Stop your interval timer when the page goes in the background (no need to run slides when it’s not visible anyway) – then start it up again when the page comes to the foreground.
  3. Use repeated setTimeout instead of setInterval with some type of repeated setTimeout like this:

Code: 

function nextSlide() {
    // show next slide now
    // set timer for the slide after this one
    setTimeout(function() {
        nextSlide();       // repeat
    }, xxx)
}

Similar post here.

More Related Contents:

  1. Stop setInterval
  2. Jquery/Ajax call with timer
  3. How to stop “setInterval” [duplicate]
  4. function in setInterval() executes without delay
  5. jQuery: How to return a value outside a function that contains the ‘this’?
  6. Using jquery check/uncheck SelectAll checkbox when all the checkboxes in the group are checked/unchecked
  7. Uploading both data and files in one form using Ajax?
  8. Loading local JSON file
  9. How can jQuery deferred be used?
  10. Sorting options elements alphabetically using jQuery
  11. How to change the pop-up position of the jQuery DatePicker control
  12. How to make `setInterval` behave more in sync, or how to use `setTimeout` instead?
  13. $ is not a function – jQuery error
  14. jQuery UI Accordion Expand/Collapse All
  15. How to get json key and value in javascript?
  16. Reset select value to default
  17. Get variable name. javascript “reflection”
  18. $().each vs $.each vs for loop in jQuery?
  19. Execute function before refresh
  20. Restart an animated GIF from JavaScript without reloading the image
  21. Why does $(‘#id’) return true if id doesn’t exist?
  22. Counting and limiting words in a textarea
  23. How can I count the number of elements with same class?
  24. Slow down scroll to top event by jQuery animate
  25. AJAX: Submitting a form without refreshing the page
  26. keyup, keydown and keypress events not working on mobile
  27. When loading an html page via ajax, will script tags be loaded?
  28. Remove/ truncate leading zeros by javascript/jquery
  29. How do I make fancybox href dynamic?
  30. Getting the “match” object in a Custom Filter Selector in jQuery 1.8

Leave a Comment