By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,466 Members | 1,141 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,466 IT Pros & Developers. It's quick & easy.

quick onkeyup problem

P: n/a
URL: http://events.unl.edu/

Description: i coded a quick and dirty key navigation for the calendar.
if you press left arrow on your keyboard, it will navigate to the
previous date and fire an ajax request to grab the content. Vice versa
for right arrow key.

Problem: the problem is when you multi-tap the arrow key a few times
consecutively (4/5 of my testers do that to quickly get to the specific
date they want), the ajax request call cant keep it up. I thought of a
few possible solution but none of them were solid and didn't really do
what i want. Among those is attaching timeout on keyup (that means even
when users are not multi-taping consecutively, they have to wait for,
say 2 seconds before the ajax fires the call.)

I would really appreciate any advise and ideas regarding this.

Thanks in advance.

Nov 29 '06 #1
Share this Question
Share on Google+
13 Replies


P: n/a

al*******@gmail.com wrote:
URL: http://events.unl.edu/

Description: i coded a quick and dirty key navigation for the calendar.
if you press left arrow on your keyboard, it will navigate to the
previous date and fire an ajax request to grab the content. Vice versa
for right arrow key.

Problem: the problem is when you multi-tap the arrow key a few times
consecutively (4/5 of my testers do that to quickly get to the specific
date they want), the ajax request call cant keep it up. I thought of a
few possible solution but none of them were solid and didn't really do
what i want. Among those is attaching timeout on keyup (that means even
when users are not multi-taping consecutively, they have to wait for,
say 2 seconds before the ajax fires the call.)

I would really appreciate any advise and ideas regarding this.

Thanks in advance.
I understand that most browsers allow a max of 2 simultaneous
XMLHttpRequests. (It's possible for the user to increase this, but you
can't rely on that.) So, there are a couple of different models you
can try for this. For one thing, depending on your available
bandwidth, you may wish to retrieve more than just one keytap's worth
of data per request. For a calendar application, depending on your
implementation and what data you've got, this shouldn't be more than a
500B per month. Keep this cached in an array that spans 6 months on
either side of the currently viewed date and retrieve info in 3-6 month
chunks to keep ahead of the user.

Also, you can have a buffer of keypress requests as in a queue. Push a
keypress request onto an array, then have your Ajax method shift the
front one off the queue whenever it's ready and finished with the last
request. This won't necessarily speed up the UX too much, but at least
all keystrokes will be recorded and get a response. There will be a
certain amount of user training involved here as an impatient user will
quickly find that tapping the key 20 times while the Ajax request is
pending will not make it happen faster. So user feedback will be
necessary - and I would think also freezing the control (with some
visual cue a la hourglass) when it's busy (which should only happen
after several keystrokes). So you can ignore new keystrokes in your
keystroke handler by asking your Ajax handler object if it has any
requests free.

Just some high-level thoughts. If you have implementation-specific
questions feel free to ask.

David

Nov 29 '06 #2

P: n/a
VK
David Golightly wrote:
I understand that most browsers allow a max of 2 simultaneous
XMLHttpRequests. (It's possible for the user to increase this, but you
can't rely on that.)
That is not exactly true. Internet Explorer (but not Firefox) allows no
more than two simultaneous requests (IO streams) of any kind open at
the same time. Say you can be opening <http://www.cnn.comand
downloading a file from <http://www.google.comat the same time. For
any third connection IE fill have to use its internal stream management
so quickly switching consumers: this is why you can "simultaneously"
open even 20 pages: but this "simultaneousity" is of the same kind as
20 element moving on the page over script: really only one at the time
is moving, but the delay is too short to see it.
btw this is why stuff like Comet is a real killer for IE: it enforces
to keep open one of two only channels and so breaks the internal
streams optimization.

This "two channels only" limitation is enforced for any free IE
version (one you can download from microsoft.com). For Windows NT
(depending on license you paid for) this limit either 5 or 10
simultaneous streams - the price for extra IE capabilities is included
into OS license.

If anyone's eyes got big and round of reading the above then go get
some cold water - and next time read the stuff before clicking "I
Accept" :-)

It is pretty irrelevant to the OP problem though.

Nov 29 '06 #3

P: n/a
Thanks for the quick reply. High level thoughts are actually what i am
looking for.

Maybe i didnt explain the problem well enough (english is my 2nd
language). The dilemma here is not so much on the speed or bandwidth;
it's more towards finding a way to deliver accurate information.

Ok, let's try this again:

Visit: http://events.unl.edu
Let's assume the user is currently on 29th Nov (today). To get back to
25th Nov, he can press on the left arrow key for 4 times. Everything is
good if he doesnt press it too quickly. But if he does, the selector
will stops at 25th just fine but since the ajax call cant keep up with
the key event listener, the content loaded on the right hand side would
most likely be events prior to 25th (i am guessing 23rd if you press
real quick).

Nevertheless, i think your array solution is worth a try.
Theoretically, i can see how it might works. I will let you know.

More ideas?

On Nov 29, 6:41 pm, "David Golightly" <davig...@gmail.comwrote:
alvinw...@gmail.com wrote:
URL:http://events.unl.edu/
Description: i coded a quick and dirty key navigation for the calendar.
if you press left arrow on your keyboard, it will navigate to the
previous date and fire an ajax request to grab the content. Vice versa
for right arrow key.
Problem: the problem is when you multi-tap the arrow key a few times
consecutively (4/5 of my testers do that to quickly get to the specific
date they want), the ajax request call cant keep it up. I thought of a
few possible solution but none of them were solid and didn't really do
what i want. Among those is attaching timeout on keyup (that means even
when users are not multi-taping consecutively, they have to wait for,
say 2 seconds before the ajax fires the call.)
I would really appreciate any advise and ideas regarding this.
Thanks in advance.I understand that most browsers allow a max of 2 simultaneous
XMLHttpRequests. (It's possible for the user to increase this, but you
can't rely on that.) So, there are a couple of different models you
can try for this. For one thing, depending on your available
bandwidth, you may wish to retrieve more than just one keytap's worth
of data per request. For a calendar application, depending on your
implementation and what data you've got, this shouldn't be more than a
500B per month. Keep this cached in an array that spans 6 months on
either side of the currently viewed date and retrieve info in 3-6 month
chunks to keep ahead of the user.

Also, you can have a buffer of keypress requests as in a queue. Push a
keypress request onto an array, then have your Ajax method shift the
front one off the queue whenever it's ready and finished with the last
request. This won't necessarily speed up the UX too much, but at least
all keystrokes will be recorded and get a response. There will be a
certain amount of user training involved here as an impatient user will
quickly find that tapping the key 20 times while the Ajax request is
pending will not make it happen faster. So user feedback will be
necessary - and I would think also freezing the control (with some
visual cue a la hourglass) when it's busy (which should only happen
after several keystrokes). So you can ignore new keystrokes in your
keystroke handler by asking your Ajax handler object if it has any
requests free.

Just some high-level thoughts. If you have implementation-specific
questions feel free to ask.

David
Nov 29 '06 #4

P: n/a
VK

al*******@gmail.com wrote:
Problem: the problem is when you multi-tap the arrow key a few times
consecutively (4/5 of my testers do that to quickly get to the specific
date they want), the ajax request call cant keep it up. I thought of a
few possible solution but none of them were solid and didn't really do
what i want. Among those is attaching timeout on keyup (that means even
when users are not multi-taping consecutively, they have to wait for,
say 2 seconds before the ajax fires the call.)

I would really appreciate any advise and ideas regarding this.
You idea with delay is the right one: but 2sec maybe is too long, 1sec
is enough (?)

var timerID = null;

formControl.onkeyup = function() {
if (timerID != null) {
window.clearTimeout(timerID);
}
timerID = window.setTimeout(MyAJAXRequest, 1000);
}

This way all timed request will be cancelled until it will be a pause
in keystrokes at least 1sec long

Nov 29 '06 #5

P: n/a

David Golightly wrote:
[...]
Also, you can have a buffer of keypress requests as in a queue. Push a
keypress request onto an array, then have your Ajax method shift the
front one off the queue whenever it's ready and finished with the last
request.
Or maybe when each request returns, grab only the last request in the
queue and get that, delete anything else. That way you don't issue
requests for key presses that are just navigation.

To the OP: in Firefox cursor key presses don't change the selected
date.
--
Rob

Nov 30 '06 #6

P: n/a


On Nov 29, 8:07 pm, "RobG" <r...@iinet.net.auwrote:
David Golightly wrote:[...]
Also, you can have a buffer of keypress requests as in a queue. Push a
keypress request onto an array, then have your Ajax method shift the
front one off the queue whenever it's ready and finished with the last
request.Or maybe when each request returns, grab only the last request in the
queue and get that, delete anything else. That way you don't issue
requests for key presses that are just navigation.

To the OP: in Firefox cursor key presses don't change the selected
date.

--
Rob
Yeah, i will definitely try the array solution tomorrow. The XHR
library i'm using also has a quick kill off function. Never thought
that could be useful :). Quick question - what is a cursor key presses?

To VK: that would be my last resort - using timeout. Thanks though.

Nov 30 '06 #7

P: n/a
VK wrote:
That is not exactly true. Internet Explorer (but not Firefox) allows
no more than two simultaneous requests (IO streams) of any kind open
at the same time.
That's absolutely not true.

By hacking the registry, I can successfully make 8 connections to any web
site, simultaneously, using IE6. (That just happens to be what my settings
is, I'm not sure what, if any, limit there is.)

I've often downloaded 5-10 huge files at the same, clearly demonstrating
that your statements are false.

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com
Nov 30 '06 #8

P: n/a


On Nov 29, 9:13 pm, "Matt Kruse" <newsgro...@mattkruse.comwrote:
VK wrote:
That is not exactly true. Internet Explorer (but not Firefox) allows
no more than two simultaneous requests (IO streams) of any kind open
at the same time.That's absolutely not true.

By hacking the registry, I can successfully make 8 connections to any web
site, simultaneously, using IE6. (That just happens to be what my settings
is, I'm not sure what, if any, limit there is.)

I've often downloaded 5-10 huge files at the same, clearly demonstrating
that your statements are false.

--
Matt Krusehttp://www.JavascriptToolbox.comhttp://www.AjaxToolbox.com
Ok Let's get done with the high level talk and dive into the
implementation - I cant get the codes to work consistently. How am I
supposed to check whether it is time to fire last request in the array.
How do we catch the flag when people stop pressing the key?

Btw, timeout works fine but...

Nov 30 '06 #9

P: n/a

al*******@gmail.com wrote:
Ok Let's get done with the high level talk and dive into the
implementation - I cant get the codes to work consistently. How am I
supposed to check whether it is time to fire last request in the array.
How do we catch the flag when people stop pressing the key?
I would create a sort of API between your objects. So you can select
the date, and when the date changes it requests an XHR from the XHR
handler. If none is available, a flag is set (a boolean property) for
the XHR handler to respond when it's available again. The
onreadystatechange event can check if this flag is set when it returns
(then of course reset it), then fire off a new request from the
currently selected date. You don't even have to keep track of the key
presses, since this will be abstracted completely within the calendar
widget - your XHR module will only be interested in the currently
selected date and will know to retrieve new info when the date changes
or when a new request becomes available.

Dec 1 '06 #10

P: n/a
VK

al*******@gmail.com wrote:
<snip quotes>
Ok Let's get done with the high level talk and dive into the
implementation - I cant get the codes to work consistently. How am I
supposed to check whether it is time to fire last request in the array.
How do we catch the flag when people stop pressing the key?
I posted the proposed workaround right together with my "OT
revelations". Can you see it in this thread? Do you have any problems
remained?

Dec 1 '06 #11

P: n/a


On Nov 30, 9:43 pm, "VK" <schools_r...@yahoo.comwrote:
alvinw...@gmail.com wrote:<snip quotes>
Ok Let's get done with the high level talk and dive into the
implementation - I cant get the codes to work consistently. How am I
supposed to check whether it is time to fire last request in the array.
How do we catch the flag when people stop pressing the key?I posted the proposed workaround right together with my "OT
revelations". Can you see it in this thread? Do you have any problems
remained
VK - i am not seeing your proposed workaround in this thread. But i'm
new to google groups. Is there somewhere i should be clicking on your
message to view the hidden codes? :)

DG - *alvin is coding using your proposed solution*

Dec 1 '06 #12

P: n/a


On Dec 1, 7:20 am, alvinw...@gmail.com wrote:
On Nov 30, 9:43 pm, "VK" <schools_r...@yahoo.comwrote:
alvinw...@gmail.com wrote:<snip quotes>
Ok Let's get done with the high level talk and dive into the
implementation - I cant get the codes to work consistently. How am I
supposed to check whether it is time to fire last request in the array.
How do we catch the flag when people stop pressing the key?I posted the proposed workaround right together with my "OT
revelations". Can you see it in this thread? Do you have any problems
remainedVK - i am not seeing your proposed workaround in this thread. But i'm
new to google groups. Is there somewhere i should be clicking on your
message to view the hidden codes? :)

DG - *alvin is coding using your proposed solution*
I solved the problem guys. I just want to say thank you for all the
tips and help. I used a combination of timeout and restructuring the
function call to get the result. Couldnt really get the array push
thing working :(.

If you're interested, you can visit my local build -
http://yansmac.unl.edu/events/
The patch should be applied to the live site any minutes now.

thanks again.

Dec 1 '06 #13

P: n/a

al*******@gmail.com wrote:
On Dec 1, 7:20 am, alvinw...@gmail.com wrote:
On Nov 30, 9:43 pm, "VK" <schools_r...@yahoo.comwrote:
alvinw...@gmail.com wrote:<snip quotes>
Ok Let's get done with the high level talk and dive into the
implementation - I cant get the codes to work consistently. How am I
supposed to check whether it is time to fire last request in the array.
How do we catch the flag when people stop pressing the key?I posted the proposed workaround right together with my "OT
revelations". Can you see it in this thread? Do you have any problems
remainedVK - i am not seeing your proposed workaround in this thread. But i'm
new to google groups. Is there somewhere i should be clicking on your
message to view the hidden codes? :)

DG - *alvin is coding using your proposed solution*

I solved the problem guys. I just want to say thank you for all the
tips and help. I used a combination of timeout and restructuring the
function call to get the result. Couldnt really get the array push
thing working :(.

If you're interested, you can visit my local build -
http://yansmac.unl.edu/events/
The patch should be applied to the live site any minutes now.

thanks again.
That works nicely. Good work!

Dec 1 '06 #14

This discussion thread is closed

Replies have been disabled for this discussion.