JSFiddle - React, Tailwind, and code Playground

by abdennour

HTML

<h1>
   Profiling
</h1>
<h2>
   Compare OOP (Number.prototype.isEven)way and Procedural Way 
</h2>
<p>
 2015(c) [email protected]
</p>
<button id="start">
    Start Profiling
</button>
<br />
<button id="end">
    End Profiling
</button>
<div id="res">
     
</div>

JavaScript

Number.prototype.isEven=function(){
     return this % 2===0;
};

function isEven(n){
   return n % 2 ===0;
   
};
var results=[],oop=0,num=3,job=-1;
function profiling(n){
    
     console.time('oop');
     (n).isEven();
     oop=console.timeEnd('oop');
     console.time('pro');
     isEven(n);
     results.push( console.timeEnd('pro')-oop);

};
function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}

$('#start').click(function(){
   results=[];$('#res').html('profiling...');
   job=setInterval(function(){
     profiling(num);
    num=getRandomInt(0, 1000000);
      
},200);
});

$('#end').click(function(){
    clearInterval(job);
    var oop_res=results.filter(function(a){return a>0}).length;
    var proc_res=results.filter(function(a){return a<0}).length;
    var both_res=results.filter(function(a){return a===0}).length;
    $('#res').html(oop_res +' times <b>Number.prototope.isEvent</b> is better than <b>isEven()</b><br/><hr>');  
        $('#res').html($('#res').html()+proc_res +' times  <b>isEven()</b> is better than <b>Number.prototope.isEvent</b><br/><hr>');
           $('#res').html($('#res').html()+both_res +' times  <b>isEven()</b> & <b>Number.prototope.isEvent</b> have the same performance');
    
});