<h3 id="results"></h3>
<button onClick="timeBackwards()">Time Backwards</button>
<button onClick="timeForwards()">Time Forwards</button>
<button onClick="timeOfLoop()">Time For...Of</button>
<button onClick="timeForEach()">Time forEach</button>
<button onClick="timeJqueryEach()">Time Jquery Each</button>
var arr = []
for(let i = 0; i < 1000000000;i++){
arr.push(i)
}
function timeForwards(){
let t0 = performance.now();
for (let i = 0; i< arr.length; i++){
}
let t1 = performance.now();
document.getElementById("results").innerHTML = "Call to timeForwards took " + (t1 - t0) + " milliseconds.";
}
function timeBackwards(){
let t0 = performance.now();
for (let i = arr.length-1; i>=0; i--){
}
let t1 = performance.now();
document.getElementById("results").innerHTML = "Call to timeBackwards took " + (t1 - t0) + " milliseconds.";
}
function timeForEach(){
let t0 = performance.now();
arr.forEach(function(element) {
});
let t1 = performance.now();
document.getElementById("results").innerHTML = "Call to timeForEach took " + (t1 - t0) + " milliseconds.";
}
function timeOfLoop(){
let t0 = performance.now();
for (let item of arr){
}
let t1 = performance.now();
document.getElementById("results").innerHTML = "Call to timeOfLoop took " + (t1 - t0) + " milliseconds.";
}
function timeJqueryEach(){
let t0 = performance.now();
$.each(arr, function( index, value ) {
});
let t1 = performance.now();
document.getElementById("results").innerHTML = "Call to timeJqueryEach took " + (t1 - t0) + " milliseconds.";
}
This Pen doesn't use any external CSS resources.