Don't cycle carousel when page isn't visible

cvrebert · cvrebert · commit 519361a58d4d · 2015-01-14T14:21:00.000-08:00
Improves performance when the page is in a hidden tab or minimized window, etc. Fixes twbs#15298 as this happens to work around it by preventing the problematic situation from occurring.
diff --git a/js/carousel.js b/js/carousel.js
@@ -59,7 +59,11 @@
 
     this.options.interval
       && !this.paused
-      && (this.interval = setInterval($.proxy(this.next, this), this.options.interval))
+      && (this.interval = setInterval(
+        // Make use of Page Visibility API when it's available
+        $.proxy(document.visibilityState ? this.nextWhenVisible : this.next, this),
+        this.options.interval
+      ))
 
     return this
   }
@@ -104,6 +108,15 @@
     return this
   }
 
+  Carousel.prototype.nextWhenVisible = function () {
+    // Don't advance when the page isn't visible to the user.
+    // Saves the browser from doing unnecessary work and gives better UX.
+    // Also works around a Chrome bug: https://github.com/twbs/bootstrap/issues/15298
+    if (!document.hidden) {
+      this.next()
+    }
+  }
+
   Carousel.prototype.next = function () {
     if (this.sliding) return
     return this.slide('next')
