single vs multiple bindings

Benchmark created on

Preparation HTML

<div id="showcase">
                <div id="photo_frame">
                        <div class="jcarousel-container jcarousel-container-horizontal" style="position: relative; display: block; "><div class="jcarousel-clip jcarousel-clip-horizontal" style="position: relative; "><ul id="photos" style="width: 1750px; overflow-x: hidden; overflow-y: hidden; position: relative; top: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; left: -1100px; " class="jcarousel-list jcarousel-list-horizontal">
                                <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal" style="float: left; list-style-type: none; list-style-position: initial; list-style-image: initial; " jcarouselindex="1"><div class="photo current" id="photo_1" style="background:url(/mimik/mimik_uploads/home_page_showcase_items__ivy_group_/6/coreknowledgeweb.png) no-repeat;"></div></li><li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-2 jcarousel-item-2-horizontal" style="float: left; list-style-type: none; list-style-position: initial; list-style-image: initial; " jcarouselindex="2"><div class="photo" id="photo_2" style="background:url(/mimik/mimik_uploads/home_page_showcase_items__ivy_group_/8/rhaweb.png) no-repeat;"></div></li><li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-16 jcarousel-item-16-horizontal" style="float: left; list-style-type: none; list-style-position: initial; list-style-image: initial; " jcarouselindex="16"><div class="photo" id="photo_2" style="background:url(/mimik/mimik_uploads/home_page_showcase_items__ivy_group_/8/rhaweb.png) no-repeat;"></div></li>                   </ul></div></div>
                </div>
                <div id="navigation">
                        <div class="arrow unitPng" id="left_arrow">
                                <img width="40" height="40" src="images/showcase_arrow_left_hover.png" alt="left">
                        </div>
                        <div id="thumbnail_frame">
                                <ul id="thumbs">
                                        <li><a class="thumbnail_link" title="Core Knowledge FoundationWebsite" id="thumb_1" href="javascript:"><img width="60" height="60" src="/mimik/mimik_uploads/home_page_showcase_items__ivy_group_/6/coreknweb-thumbnail.png" alt="Website"></a></li><li><a class="thumbnail_link" title="Resort Hotel AssociationWebsite and Secure Document Management Tools" id="thumb_2" href="javascript:"><img width="60" height="60" src="/mimik/mimik_uploads/home_page_showcase_items__ivy_group_/8/rha-thumbnail.png" alt="Website and Secure Document Management Tools"></a></li>                             </ul>
                        </div>
                        <div class="arrow unitPng" id="right_arrow">
                                <img width="40" height="40" src="images/showcase_arrow_right_hover.png" alt="right">
                        </div>
                        <div id="highlight_bracket"></div>              </div>
        </div>



<script src="http://redesign.ivygroup.com/js/jquery-1.5.2.min.js"></script>
<script src="http://sandbox.ivygroup.com/js/jquery.jcarousel.min.js"></script>

Test runner

Ready to run.

Testing in
TestOps/sec
single
$('.thumbnail_link,.arrow').click(function() {
 var $this = $(this),
     $visible_photo = $('.photo').filter(function() {
   return $(this).offset().left === $('.photo_frame').offset().left;
  }),
     old_index = $visible_photo.index('#carousel_photos img'),
     new_index;
 if ($this.hasClass('thumbnail_link')) {
  new_index = $this.index('.thumbnail_link');
  carousel.scroll(new_index + 1);
 } else {
  new_index = old_index;
  if ($this.hasClass('arrow')) {
   if ($this.attr('id') == 'left_arrow' && old_index !== 0) {
    carousel.prev();
    new_index = old_index - 1;
   } else if ($this.attr('id') == 'right_arrow' && old_index !== $('').length - 1) {
    carousel.next();
    new_index = old_index + 1;
   }
  }
 }
 return false;
});
ready
multiple
$('.thumbnail_link').click(function() {
 carousel.scroll($(this).index('.thumbnail_link') + 1) % Math.min(carousel.size, 7);
});
$('#left_arrow').click(function() {
 carousel.prev()
});
$('#right_arrow').click(function() {
 carousel.next()
});
ready

Revisions

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