Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>Selection Tester</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body { background-color: #000; font: 1em Helvetica, Arial; color: #fff; }
#log > div, #container > div { margin: 0.1em; }
#container > div { width: 15em; float: left; }
#log { height: 8em; }
.legend { height: 0.8em; width: 0.8em; float: left; margin: 0.1em; }
</style>
</head>
<body>
​
  <label for="namespace">Namespace: </label><input id="namespace"/>
  <label for="id">Id: </label><input id="id"/>
  <span id="status"></span>
  
  <div id="log"></div>
  
  <div id="container"></div>
  
  <script>
    var numSampleElements = 500;
    var numTestSelections = 100;
    var namespaces = ['foo', 'bar', 'baz'];
    var ids = ['service_selected', 'package_selected', 'option_selected', 'license_selected', 'product_selected'];
  
    var select_methods = {
      select_Phil: {
        selection: function (namespace, id) {
          return $("[id*=" + namespace + "_" + id + "_]");
        },
        color: 'red'
      },
      select_Ghommey: {
        selection: function (namespace, id) {
          return $("[id*=" + namespace + "]").filter("[id*=" + id + "_]");
        },
        color: 'green'
      },
      select_Josh_Stodola: {
        selection: function (namespace, id) {
          return $("[id*=" + id + "_]", $("[id^=" + namespace + "]"));
        },
        color: 'blue'
      },
      select_brianpeiris: {
        selection: function (namespace, id) {
          return $(["[id^=", namespace, "_", id, "_]"].join(''));
        },
        color: 'purple'
      }
    }
    
    var timeoutId;
    $('#namespace, #id').keyup(function(){
      clearTimeout(timeoutId);
      timeoutId = setTimeout(performTests, 500);
    });
    
    function performTests(){
      var namespaceHasChanged = $('#namespace').hasChanged();
      var idHasChanged = $('#id').hasChanged();
      if (!(namespaceHasChanged || idHasChanged)) { return; }
      
      var namespace = $.trim($('#namespace').val());
      var id = $.trim($('#id').val());
      
      $('#container > div').removeClass();
      displayLegend();
      $('#log').empty();
      if (!namespace || !id) { return; }
      $('#status').text('running...');
      setTimeout(function(){
        var now = new Date();
        log([now, now.getTime()]);
        
        for (var select_method in select_methods) {
          var cssClass = 'selected by_' + select_method;
          var start = new Date();
          for (var i = 0; i < numTestSelections - 1; i++) {
            select_methods[select_method].selection(namespace, id);
          }
          var elapsed = (new Date()) - start;
          var numSelected = select_methods[select_method].selection(namespace, id).addClass(cssClass).length;
          log([select_method, elapsed, 'ms', numSelected, 'selected'], cssClass);
        }
        
        displayLegend();
        $('#status').text('');
      }, 100);
    }
    
    function displayLegend() {
      $('#log > div > .legend, #container > div > .legend').hide();
      $('.selected').each(function(){
        for (var select_method in select_methods) {
          var cssClass = 'by_' + select_method;
          var color = select_methods[select_method].color;
          if ($(this).hasClass(cssClass)) {
            if (!$(this).find('.legend .' + cssClass).show().length) { 
              $(this).prepend($('<div/>').addClass('legend ' + cssClass).css('background-color', color));;
            }
          }
        }
      });
    }
        
    function log(message, cssClass) {
      var logText = $.map(message, function(x) { return x.toString(); }).join(' ');
      $('#log').append($('<div/>').text(logText).addClass(cssClass));
    }
​
    (function($){
      $.fn.hasChanged = function (options) {
        options = $.extend({trim: true}, options);
        var currentVal = options.trim ? $.trim(this.val()) : this.val();
        var lastVal = this.data('lastVal');
        this.data('lastVal', currentVal);
        return lastVal === undefined || lastVal !== currentVal;
      }
    })(jQuery);
​
    
    function generateSampleElements(numElements) {
      for (var i = 0; i < numElements; i++) {
        var namespace = namespaces[randInt(namespaces.length)];
        var _id = ids[randInt(ids.length)];
        var id = [namespace, _id, i].join('_');
        $('#container').append(
          $('<div/>').attr('id', id).text(id).addClass('target')
        );
      }  
      function randInt(max) {
        return Math.floor(Math.random() * max);
      }
    }
    generateSampleElements(numSampleElements);
  </script>
</body>
</html>
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers