I have a dynamic order page which has to update multiple elements when a value is changed.
Here is the main function that does that. Note it only updates the values if they are different from what is already there. So for example it doesn't update with a checkmark, if there already is a check mark there.
function reput(element, content, animate) {
target = $(element);
target_check = target.html().indexOf("check_mark");
//checks if target already has a check mark
content_check = content.indexOf("check_mark");
//checks if new value has check mark
th = target.html();
if(th == content || (target_check == content_check && target_check != -1)) {
return true;
//if any of the values match, then don't do anything
}
else {
//values didn't match so update the element
if (animate || animate == undefined)
target.fadeOut(100).empty().fadeIn(200).append(content);
else
target.empty().append(content);
}
}
This function is called multiple times in several places like so:
reput(("#email"), (cp.email));
reput(("#chat"), (cp.chat));
reput(("#voice"), (cp.voice));
reput(("#member"), (cp.member));
reput(("#price"), ('$' + cp.price), false);
What would be the best way to improve the load time of this function? Having it accept an array, iterating through it and appending the values one by one? Would it save resources to just use fadeIn instead of fadeOut/fadeIn?
Bonus question: What are some ways to test how much processing power your script/function is using up?