I am trying to test how caching my DOM selection (assigning the selection to a var) is performing over my old JS code. I tried using JSPerf, but it seems to just run everything in a loop, which means my var assignment is getting duplicated thousands of times. How can I fix this?
JSFiddle for my updated code
Script for benchmark (old code) #1:
$('.projectscontainer').on("click", "span.destproject", function () {
$(this).siblings('.projectschildren').toggle().end().siblings('div.destarrow').toggleClass("arrow-right arrow-down");
}).on("click", "div.destarrow", function () {
$(this).parent().find("span.destproject").trigger("click");
});
$('body').on("click", "span#expandcollapse", function () {
if ($(this).text() === 'Expand All') { //Currently collapsed
var startTime = new Date().getTime();
$('.projectscontainer').find("div.destarrow").filter('.arrow-right').toggleClass("arrow-right arrow-down");
$('.projectscontainer').find(".projectschildren").toggle(true);
var endTime = new Date().getTime();
console.log('Action took: ' + (endTime - startTime) + 'ms');
} else { //Currently expanded
var startTime = new Date().getTime();
$('.projectscontainer').find("div.destarrow").filter('.arrow-down').toggleClass("arrow-down arrow-right");
$('.projectscontainer').find(".projectschildren").toggle(false);
var endTime = new Date().getTime();
console.log('Action took: ' + (endTime - startTime) + 'ms');
}
$(this).text(function (i, currentText) {
return currentText === 'Expand All' ? 'Collapse All' : 'Expand All';
});
});
Script for benchmark (new code) #2:
var projectscontainer = $('body').find('div.projectscontainer');
var projectschildren = projectscontainer.find("div.projectschildren");
var destarrows = projectscontainer.find("div.destarrow");
var srcprojects = projectscontainer.find("div.srcprojects");
projectscontainer.on("click", "span.destproject", function (){
$(this).siblings('div.projectschildren').toggle().end().siblings('div.destarrow').toggleClass("arrow-right arrow-down");
}).on("click", "div.destarrow", function (){
$(this).parent().find("span.destproject").trigger("click");
});
$('body').on("click", "#expandcollapse", function (){
if($(this).text() === 'Expand All'){//Currently collapsed
var startTime = new Date().getTime();
destarrows.filter('div.arrow-right').toggleClass("arrow-right arrow-down");
projectschildren.toggle(true);
var endTime = new Date().getTime();
console.log('Action took: ' + (endTime - startTime) + 'ms');
} else {//Currently expanded
var startTime = new Date().getTime();
destarrows.filter('div.arrow-down').toggleClass("arrow-down arrow-right");
projectschildren.toggle(false);
var endTime = new Date().getTime();
console.log('Action took: ' + (endTime - startTime) + 'ms');
}
$(this).text(function(i, currentText){
return currentText === 'Expand All' ? 'Collapse All' : 'Expand All';
});
});
JSPerf benchmarks end up running these lines
var projectscontainer = $('body').find('div.projectscontainer');
var projectschildren = projectscontainer.find("div.projectschildren");
var destarrows = projectscontainer.find("div.destarrow");
var srcprojects = projectscontainer.find("div.srcprojects");
over and over (along with all the other code), while in my original code, it's only run once. How do I get it to only run once instead of running repeatedly?
Define setup for all tests
section. Can you make a JSPerf test and link me to it? – Blender Apr 16 '13 at 0:10