5
\$\begingroup\$

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?

\$\endgroup\$
1
7
\$\begingroup\$

for optimizing this function - will be better if you'll give an example of working code. Just upload some sample to http://jsfiddle.net/.

Anyway, to reduce the load on any animations, use default CSS transitions.

-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;

And then change the opacity from 1 to 0 or change class. Here is an working example http://jsfiddle.net/x6fxx/ , works much faster then jquery's script, this one is css based solution which is using hardware acceleration ( modern browsers ).

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.