Blair,
Thanks for the advice. You may not have noticed my post that came
moments after the one you replied to where I'd figured out the
unnecessary use of eval on my own. I do try to avoid it. Also, while the
second loop may be able to be optimized, neither of the loops in this
case are slow. The slow bit is the line:
myCells = $(myjQueryString, myDiv);
I've proved with my alerts that this is the slow instruction. I'm
creating this jQuery object only once as I've been taught to do, but
it's still very slow (read: three to five seconds).
More comments below...
Blair McKenzie wrote:
Why are you using the eval at all?
myCells = $(myjQueryString, myDiv);
is almost certainly faster than
eval("myCells = $(\"" + myjQueryString + "\", myDiv);");
In respect to general optimisation, the next most common bottleneck
after inefficient selectors is unnecessarily creating jQuery objects
(like myCells or myCallendarCell). If it is at all possible use
closures to create them once and give enclosed functions access.
You haven't included the context of your code, but you could probably
create a jQuery object containing all the cells in a particular
calendar outside the ajax call, then simply filter it inside the
success function. The jQuery object would actually only get created
once on page load (or calendar change) and the filter used in success
would be as narrow as it gets.
I don't really understand how to use filters. You're the second or third
person to mention them, and I did some reading yesterday, but I still
don't completely understand. Also, I'm not entirely sure what you mean
by "context of your code", but I think this is what you mean:
I always have *three* calendars on screen at a time. The tables that
make up the calendars are served up by my ColdFusion server and that
part is lightening quick. I then populate the dates on the calendars via
JavaScript. Background and text colors are also changed via JavaScript
depending on what mode the screen with the calendars is in.
Each is a grid that is 6x7 (not including any headers) and each calendar
cell (td)has the following attributes:
id
class
normalBGColor
clickedBGColor
normalTextColor
clickedTextColor
state
status
dateValue
style
onmouseover
onmouseout
onclick
ondblclick
Does that help in any way?
And instead of creating myCalendarCell over an over you could continue
to use myCells, by addingmyCells.eq(i) at the start of the loop and
myCells.end() and the end of the loop.
I'll look at that today. I've never used .eq() or .end(), but I'll read
the API and any thing I can find in the documentation to see if it will
optimize anything further, but again, the loop isn't the point where
things really slow down. The slow instruction is: myCells =
$(myjQueryString, myDiv);
Thanks again for the response Blair. Any other insight as to what I can
do about the speed of:
myCells = $(myjQueryString, myDiv);
or how might do that differently is much appreciated.
Thanks heaps!
Chris
I'm probably not explaining this very well, but I hope this helps.
Blair
On 1/19/07, *Christopher Jordan* <[EMAIL PROTECTED]
<mailto:[EMAIL PROTECTED]>> wrote:
Hi folks,
I've tried narrowing down my selector criteria, but that didn't
help much. Then I tried Brian Miller's suggestion to get my
selector into a comma delimited list like this:
myDiv = $(".CalendarWrapper"); // I'm doing this because there are
three calendars on screen
myCells = $("[EMAIL PROTECTED]" + ShiftDate + "], [EMAIL PROTECTED]" +
ShiftDate2 + "]", myDiv);
The goal of this, as I understand it, is to narrow down where in
the DOM to search and exactly what to search for. This is still
pretty slow.
I'll post my code here and maybe someone can see what I'm doing
wrong, or if it's just going to be a bit slow:
------ snip ------
success: function(data){
alert("back from server");
FlexOrderData = eval("(" + data + ")");
alert("done with first evaluation");
var myRecordCount = FlexOrderData.recordcount;
var myTempDate, myBackgroundColor, myShiftDate,
myCalendarCell, myCells;
var myjQueryString = "";
for(i = 0; i < myRecordCount; i++){
myShiftDate = "{ts '" +
CFJS.ListFirst(FlexOrderData.data.SHIFTDATE[i],".") + "'}";
mySelector = "[EMAIL PROTECTED]" + myShiftDate + "]";
myjQueryString = CFJS.ListAppend(myjQueryString, mySelector);
}
alert("done with first loop");
myDiv = $(".CalendarWrapper");
eval("myCells = $(\"" + myjQueryString + "\", myDiv);");
alert("done with second evaluation");
for(i = 0; i < myCells.length; i++){
myCalendarCell = $(myCells[i]);
myShiftDate = myCalendarCell.attr("dateValue");
myTempDate = $.odbcDateTimeParse(myShiftDate);
myBackgroundColor = "#ThisWeekdayColor#";
if(!(myTempDate.getDay() % 6)){
myBackgroundColor = "#ThisWeekendColor#";
}
myCalendarCell.removeClass("CalendarCellDisabled").addClass("CalendarCellEnabled").attr("state",
"Enabled").css({background:myBackgroundColor,
color:"#ThisFlexOrderEntryNormalTextColor#"});
<CFIf ParameterExists(ThisSelectedDate)>
if("#ThisSelectedDate#" == myShiftDate){
CalendarEvents(myCalendarCell.attr("id"), "click");
}
<CFElse>
CalendarEvents(myCalendarCell.attr("id"), "click");
</CFIf>
}
alert("done!");
},
------ end ------
You can see that I've put in a few alerts to roughly gage how long
each section takes. The problem crops up in the second evaluation:
eval("myCells = $(\"" + myjQueryString + "\", myDiv);");
This is taking several seconds. Everything else is lightening
quick. Any more ideas? Brandon mentioned one about using filter,
but I wasn't sure how I'd fit it into what I'm doing. Hopefully
seeing all this code will help. I just need to get it sped up. My
client is very big on things happening quickly.
Thanks,
Chris
Brandon Aaron wrote:
You should probably get an array of date values and then use a custom
filter function ... maybe something like this (untested):
var dateValues = ['date1', 'date2', 'date3'];
$("[EMAIL PROTECTED]).filter(function() {
for (var i=0; i<dateValues.length; i++);
return ($(this).attr('dateValue') == dateValues[i]);
});
--
Brandon Aaron
On 1/16/07, Christopher Jordan
<[EMAIL PROTECTED]> <mailto:[EMAIL PROTECTED]> wrote:
Hi gang,
I've got a for loop in which I have jQuery select a different DOM element
for each iteration. The code I've got that selects the element is:
FlexCell = $("[EMAIL PROTECTED]" + ShiftDate + "]");
So far, it's taking about three seconds to complete a loop of fifteen
iterations. Yikes! :o( If I remove the above line from the code, it's
lightning quick!
I should mention that the three second approximation is *after* I upgraded
to the very latest jQuery build (jquery-latest.pack.js... from the
jquery.com <http://jquery.com> main page). So upgrading did give me a
slight performance
increase.
Can anybody help me speed this up?
Thanks,
Chris
--
http://www.cjordan.info
<http://www.cjordan.info>
_______________________________________________
jQuery mailing list
[email protected] <mailto:[email protected]>
http://jquery.com/discuss/
_______________________________________________
jQuery mailing list
[email protected] <mailto:[email protected]>
http://jquery.com/discuss/
--
http://www.cjordan.info
_______________________________________________
jQuery mailing list
[email protected] <mailto:[email protected]>
http://jquery.com/discuss/
------------------------------------------------------------------------
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
--
http://www.cjordan.info
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
