Carousel

JavaScript performance comparison

Test case created by

Preparation code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
    

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
old
var Carousel = (function() {

  var x = 0
  var a = true

  return {

    stopAutoScroll: function() {
      if (!a) return
      a = false
      $("#sbaCarousel").stop({
        "clearQueue": "true"
      })
    },

    autoScroll: function() {
      for (i = 0; i < 2; i++) {
        $("#sbaCarousel").animate({
          "right": "308px"
        }, 9000, "linear")
        $("#sbaCarousel").animate({
          "right": "616px"
        }, 9000, "linear")
        $("#sbaCarousel").animate({
          "right": "308px"
        }, 9000, "linear")
        $("#sbaCarousel").animate({
          "right": "000px"
        }, 9000, "linear")
      }
    },

    scrollRight: function(e) {
      this.stopAutoScroll()
      pos = (x == 0) ? "308px" : "616px"
      $("#sbaCarousel").animate({
        "right": pos
      }, 200)
      if (x < 2) x++
    },

    scrollLeft: function(e) {
      this.stopAutoScroll()
      pos = (x == 2) ? "308px" : "0px"
      $("#sbaCarousel").animate({
        "right": pos
      }, 200)
      if (x > 0) x--
    },

    init: function() {
      var self = this
      $("#sba .sbaScrollL").bind("click", function(e) {
        self.scrollLeft(e)
      })
      $("#sba .sbaScrollR").bind("click", function(e) {
        self.scrollRight(e)
      })
      self.autoScroll()
    }

  }

})();
pending…
new
var Carousel1 = (function() {
  var cur = 0;
  var flag = true;
  return {
    stopAutoScroll: function() {
      if (!flag) return;
      flag = false;
      $("#sbaCarousel").stop({
        "clearQueue": "true"
      })
    },
    autoScroll: function() {
      for (var count = 0; count < 2; count++) {
        $("#sbaCarousel").animate({
          "right": "308px"
        }, 9000, "linear");
        $("#sbaCarousel").animate({
          "right": "616px"
        }, 9000, "linear");
        $("#sbaCarousel").animate({
          "right": "308px"
        }, 9000, "linear");
        $("#sbaCarousel").animate({
          "right": "000px"
        }, 9000, "linear");
      }
    },
    scrollRight: function(e) {
      this.stopAutoScroll();
      var pos = (cur == 0) ? "308px" : "616px";
      $("#sbaCarousel").animate({
        "right": pos
      }, 200);
      if (cur < 2) cur++;
    },
    scrollLeft: function(e) {
      this.stopAutoScroll();
      var pos = (cur == 2) ? "308px" : "0px";
      $("#sbaCarousel").animate({
        "right": pos
      }, 200);
      if (cur > 0) cur--;
    },
    init: function() {
      var self = this;
      var $sba = $("#sba");
      $sba.find(".sbaScrollL").bind("click", function(e) {
        self.scrollLeft(e)
      });
      $sba.find(".sbaScrollR").bind("click", function(e) {
        self.scrollRight(e)
      });
      self.autoScroll();
    }
  }
})();
pending…

You can edit these tests or add even more tests to this page by appending /edit to the URL.

Compare results of other browsers

0 Comments