Actually, forget that, it doesn't work, it just no longer throws a
javascript error :)
On Jun 11, 12:21 pm, Gordon <[EMAIL PROTECTED]> wrote:
> I tried the following:
>
> self.handleRange = function (rule)
> {
> valFields = $(rule.valField);
> if (!(minVal = parseInt ($(rule.minField).val (),
> 10))) {minVal =
> 0};
> if (!(maxVal = parseInt ($(rule.maxField).val (),
> 10))) {maxVal =
> 0x7FFFFFFF};
>
> self.containerItems.each (function ()
> {
> // This line doesn't work!
> thisVal = parseInt (valFields.filter
> (this.id).val (), 10);
> if ((thisVal < minVal) || (thisVal > maxVal))
> {
> // do stuff
> }
> });
> };
>
> This seems to work but is actually slower than the original function,
> according to FireBug
>
> On Jun 11, 11:01 am, Gordon <[EMAIL PROTECTED]> wrote:
>
> > I am currently working through a script that at the moment works just
> > fine but where there are some performance bottlenecks that I am trying
> > to reduce. It works with acceptible speed when dealing with 40 or so
> > elements but in practice the system could be dealing with hundreds so
> > every ms I can scrape off the execution time will help.
>
> > There are two sections I am focusing on in particular. One is my
> > initialization function, the other is part of a loop which processes
> > elements based on the value of fields contained within.
>
> > The loop has the highest optimization priority so I'll start with
> > that. Here is my code (with some details missing)
>
> > self.handleRange = function (rule)
> > {
> > if (!(minVal = parseInt ($(rule.minField).val (), 10)))
> > {minVal =
> > 0};
> > if (!(maxVal = parseInt ($(rule.maxField).val (), 10)))
> > {maxVal =
> > 0x7FFFFFFF};
>
> > //console.log (self.containerItems.not
> > ('.fxUnSelected').length);
> > self.containerItems.each (function ()
> > {
> > // This line needs optimizing!
> > thisVal = parseInt ($(rule.valField, this).val (),
> > 10);
> > if ((thisVal < minVal) || (thisVal > maxVal))
> > {
> > // do stuff
> > }
> > });
> > };
>
> > self.containerItems is a jQuery selector I run at initialization so I
> > don't have to keep reselecting all the items I want to work with.
>
> > I wanted to rewrite the function as follows:
>
> > self.handleRange = function (rule)
> > {
> > valFields = $(rule.valField);
> > if (!(minVal = parseInt ($(rule.minField).val (), 10)))
> > {minVal =
> > 0};
> > if (!(maxVal = parseInt ($(rule.maxField).val (), 10)))
> > {maxVal =
> > 0x7FFFFFFF};
>
> > self.containerItems.each (function ()
> > {
> > // This line doesn't work!
> > thisVal = parseInt (valFields.filter (this).val (),
> > 10);
> > if ((thisVal < minVal) || (thisVal > maxVal))
> > {
> > // do stuff
> > }
> > });
> > };
>
> > in my experience I have found that filtering out elements I'm not
> > interested in from a selection I have already made is considerably
> > faster than running a new selector to get the elements I want. My
> > intent here was to grab all the fields which match the selector
> > specified in the rule passed to the function (say, '.priceval' for
> > example) and then in the loop select only the one that was relevent
> > with this. Unfortunately, this doesn't seem to work.
>
> > If anyone knows what I am doing wrong here I'd appreciate a pointer to
> > get me going in the right direction.
>
> > The other optimization I need is in initialization. My suspicion here
> > is that copious use of parseInt is slowing this function down
> > significantly.
>
> > self.computeGridCols = function ()
> > // Calculate number of columns needed
> > {
> > return (self.colCount = Math.floor (container.width () /
> > self.itemWidth));
> > };
> > self.computeGridRows = function ()
> > // Calculate numer of rows needed
> > {
> > return (self.rowCount = Math.floor (container.height () /
> > self.itemHeight));
> > };
> > self.initGrid = function ()
> > // Compute a grid layout for movement effects
> > {
> > // Container dimensions
> > self.containerWidth = container.width ();
> > self.containerHeight = container.height ();
> > // container padding
> > self.containerPadX = parseInt (container.css
> > ('padding-left'), 10);
> > self.containerPadY = parseInt (container.css
> > ('padding-top'), 10);
> > // All CSS attributes that affect how much space an item
> > takes up
> > self.itemPadX = (
> > parseInt (self.containerItems.css
> > ('border-left-width'), 10)
> > + parseInt (self.containerItems.css
> > ('border-right-width'), 10)
> > + parseInt (self.containerItems.css
> > ('margin-left'), 10)
> > + parseInt (self.containerItems.css
> > ('margin-right'), 10)
> > + parseInt (self.containerItems.css
> > ('padding-left'), 10)
> > + parseInt (self.containerItems.css
> > ('padding-right'), 10)
> > );
> > self.itemPadY = (
> > parseInt (self.containerItems.css
> > ('border-top-width'), 10)
> > + parseInt (self.containerItems.css
> > ('border-bottom-width'), 10)
> > + parseInt (self.containerItems.css ('margin-top'),
> > 10)
> > + parseInt (self.containerItems.css
> > ('margin-bottom'), 10)
> > + parseInt (self.containerItems.css
> > ('padding-top'), 10)
> > + parseInt (self.containerItems.css
> > ('padding-bottom'), 10)
> > );
> > // Item dimensions
> > self.itemStartWidth = self.itemWidth =
> > self.containerItems.width ()
> > + self.itemPadX;
> > self.itemStartHeight = self.itemHeight =
> > self.containerItems.height
> > () + self.itemPadY;
> > // Column and row counts
> > self.colStartCount = self.computeGridCols ();
> > self.rowStartCount = self.computeGridRows ();
> > };
>
> > ParseInt seems to be the only reliable way of grabbign the CSS values
> > I need, and as the designer hasn't finialized the page layout yet and
> > might do any thing with the margin, border and padding values they all
> > have to be checked individually. If anyone knows of improvements I
> > can make here I'd appreciate the feedback.
