[jQuery] Re: jquery is'nt very effective at execution
Using $(td.Name) should also improve the scripts performance as
well. When you use $(.Name) it will go through all tags on the page.
If the class name is on other tags as well, you could always add
another selector (e.g. $(td.Name, li.Name).
On Jun 11, 3:02 am, Dan G. Switzer, II [EMAIL PROTECTED]
wrote:
Thank you.
Is it possible to interrupt the script each time the user enter a new
letter
in the search box ?
What I'd recommend doing is building in a setTimeout() delay that would only
fire off the event if the user pauses typing--that way you're not trying to
fire it off for every keystroke.
As for stop the each(), if you do a return true/false inside the callback
function, it should stop execution of the loop.
This means you can add a condition to the loop based on a global variable to
determine if you should stop the loop. So, something like the following
would work:
$(.Name).each(
function (){
// provided lastTbxValue is a global value that's updated
each
// time the value changes, this should stop the loop
if( tbxValue != lastTbxValue ) return false;
// create a pointer to the current table cell
var oCell = $(this);
// hide the parent
oCell.parent().[oCell.text().indexOf(tbxValue) -1 ? show
: hide]();
}
);
-Dan
[jQuery] Re: jquery is'nt very effective at execution
Using $(td.Name) should also improve the scripts performance as
well. When you use $(.Name) it will go through all tags on the page.
If the class name is on other tags as well, you could always add
another selector (e.g. $(td.Name, li.Name).
The best thing to do would be to cache those values, that way the selector
never has to run again:
// create global var
var oCell;
// when the DOM is ready, cache all the table cells
$(document).ready(
function (){
oCell = $(td.Name);
}
);
Now you don't have to perform the $(td.Name) look up during each
keystroke--which will save you a lot of processing.
-Dan
[jQuery] Re: jquery is'nt very effective at execution
this test : if( tbxValue != lastTbxValue ) will always return false because the function each() monoplize the unique thread. The event onkeyup from the textbox couldn't occur while each() is running, so tbxValue remains the same in the meantime. As I stated, you'll want to use a setTimeout() to trigger the population. This will make the execution asynchronous. I'd also recommend triggering the code to run only if another keypress hasn't occurred in the past 50-100ms or so. That way you're only running the code once the user pauses or stops typing. This is how most auto-complete/suggestion plug-ins work. -Dan
[jQuery] Re: jquery is'nt very effective at execution
It doesn't work : I write this :
input type=text name=tbxSearch id=tbxSearch class=textbox
onkeypress=return disableEnterKey(event) onkeyup=tbxValue
=this.value.toLowerCase();setTimeout('tbxSearch_keyup()',0); /
var instance_fonction = 0;
function tbxSearch_keyup()
{
instance_fonction++;
Populate(instance_fonction);
}
function Populate(instance_en_cours)
{
rowsToShow = culmsName.contains(tbxValue).parent();
rows.not(rowsToShow).each(function(){
if(instance_fonction!=instance_en_cours)
{
return false;
alert(interruption);
}
$(this).hide();
});
rowsToShow.each(function(){
if(instance_fonction!=instance_en_cours)
{
return false;
alert(interruption);
}
$(this).show();
});
}
Dan G. Switzer, II wrote:
As I stated, you'll want to use a setTimeout() to trigger the population.
This will make the execution asynchronous.
--
View this message in context:
http://www.nabble.com/jquery-is%27nt-very-effective-at-execution-tf3887482s15494.html#a11060848
Sent from the JQuery mailing list archive at Nabble.com.
[jQuery] Re: jquery is'nt very effective at execution
function Populate(instance_en_cours)
{
rowsToShow = culmsName.contains(tbxValue).parent();
rows.not(rowsToShow).each(function(){
if(instance_fonction!=instance_en_cours)
{
return false;
alert(interruption);
}
$(this).hide();
});
rowsToShow.each(function(){
if(instance_fonction!=instance_en_cours)
{
return false;
alert(interruption);
}
$(this).show();
});
}
If I replace your Populate() with the following:
var oCells = null;
function Populate(instance_en_cours)
{
if( oCells == null ) oCells = $(td.Name);
var sCurrent = tbxValue;
oCells.each(
function (){
var c = $(this), p = c.parent();
p[0].style.display =
(c.text().toLowerCase().indexOf(sCurrent) - 1) ? : none;
}
);
}
I get really good performance.
The biggest hit comes after the first key press when the oCells code runs.
You could probably cache that at an earlier time. I tried doing it at
$(document).ready() but it seems like you move those items during the
window.onload event--so it makes the cache obsolete.
-Dan
[jQuery] Re: jquery is'nt very effective at execution
yes, but why doesn't interruption work even if the callback function
fromonkeyup event is called with a setTimeout ?
Dan G. Switzer, II wrote:
function Populate(instance_en_cours)
{
rowsToShow = culmsName.contains(tbxValue).parent();
rows.not(rowsToShow).each(function(){
if(instance_fonction!=instance_en_cours)
{
return false;
alert(interruption);
}
$(this).hide();
});
rowsToShow.each(function(){
if(instance_fonction!=instance_en_cours)
{
return false;
alert(interruption);
}
$(this).show();
});
}
If I replace your Populate() with the following:
var oCells = null;
function Populate(instance_en_cours)
{
if( oCells == null ) oCells = $(td.Name);
var sCurrent = tbxValue;
oCells.each(
function (){
var c = $(this), p = c.parent();
p[0].style.display =
(c.text().toLowerCase().indexOf(sCurrent) - 1) ? : none;
}
);
}
I get really good performance.
The biggest hit comes after the first key press when the oCells code runs.
You could probably cache that at an earlier time. I tried doing it at
$(document).ready() but it seems like you move those items during the
window.onload event--so it makes the cache obsolete.
-Dan
--
View this message in context:
http://www.nabble.com/jquery-is%27nt-very-effective-at-execution-tf3887482s15494.html#a11071830
Sent from the JQuery mailing list archive at Nabble.com.
[jQuery] Re: jquery is'nt very effective at execution
http://fra.orkos.com/produits/tarifs.aspx Here is a page which I made.
This
page presents a list of products classified in a hierarchy. I have a
textbox
that allows the user to filter these products. Try to type a text in this
textbox (for example the word apple) and observe the speed of filtering.
If you have a sufficient screen resolution you can also see that the
hierarchy at left hand side is filtered at the same time. The only problem
is that I need a hundred lines of script to do this...
When I discovered jquery, I wanted immediately to remake this script to see
how shorter the script could be. I was however quickly stopped by the
performances... http://fra.orkos.com/tests/pricelist/ Here , you can see
the same page but the research script has been replaced by two jquery lines
of code. (the script is slow and may blocks the browser during a few
seconds. Do not stop script, it will not block you a long time)
$(.Name).parents(tr).hide(); //hide all the lines
$(.Name:contains('+tbxValue+')).parents(tr).show(); //then display
I think you're going about this the wrong way. You're doing a lot of DOM
parsing here.
I'd try something like:
$(.Name).each(
function (){
// create a pointer to the current table cell
var oCell = $(this);
// hide the parent
oCell.parent().[oCell.text().indexOf(tbxValue) -1 ? show
: hide]();
}
);
This should only parse through the tree one time deciding whether to
hide/show each row.
I choose not to use the contains() selector, because I'm not sure how will
it performs.
-Dan
[jQuery] Re: jquery is'nt very effective at execution
Thank you.
Is it possible to interrupt the script each time the user enter a new letter
in the search box ?
Dan G. Switzer, II wrote:
http://fra.orkos.com/produits/tarifs.aspx Here is a page which I made.
This
page presents a list of products classified in a hierarchy. I have a
textbox
that allows the user to filter these products. Try to type a text in this
textbox (for example the word apple) and observe the speed of filtering.
If you have a sufficient screen resolution you can also see that the
hierarchy at left hand side is filtered at the same time. The only problem
is that I need a hundred lines of script to do this...
When I discovered jquery, I wanted immediately to remake this script to
see
how shorter the script could be. I was however quickly stopped by the
performances... http://fra.orkos.com/tests/pricelist/ Here , you can see
the same page but the research script has been replaced by two jquery
lines
of code. (the script is slow and may blocks the browser during a few
seconds. Do not stop script, it will not block you a long time)
$(.Name).parents(tr).hide(); //hide all the lines
$(.Name:contains('+tbxValue+')).parents(tr).show(); //then display
I think you're going about this the wrong way. You're doing a lot of DOM
parsing here.
I'd try something like:
$(.Name).each(
function (){
// create a pointer to the current table cell
var oCell = $(this);
// hide the parent
oCell.parent().[oCell.text().indexOf(tbxValue) -1 ? show
: hide]();
}
);
This should only parse through the tree one time deciding whether to
hide/show each row.
I choose not to use the contains() selector, because I'm not sure how will
it performs.
-Dan
--
View this message in context:
http://www.nabble.com/jquery-is%27nt-very-effective-at-execution-tf3887482s15494.html#a11054117
Sent from the JQuery mailing list archive at Nabble.com.
[jQuery] Re: jquery is'nt very effective at execution
Thank you.
Is it possible to interrupt the script each time the user enter a new
letter
in the search box ?
What I'd recommend doing is building in a setTimeout() delay that would only
fire off the event if the user pauses typing--that way you're not trying to
fire it off for every keystroke.
As for stop the each(), if you do a return true/false inside the callback
function, it should stop execution of the loop.
This means you can add a condition to the loop based on a global variable to
determine if you should stop the loop. So, something like the following
would work:
$(.Name).each(
function (){
// provided lastTbxValue is a global value that's updated
each
// time the value changes, this should stop the loop
if( tbxValue != lastTbxValue ) return false;
// create a pointer to the current table cell
var oCell = $(this);
// hide the parent
oCell.parent().[oCell.text().indexOf(tbxValue) -1 ? show
: hide]();
}
);
-Dan
