Slow AJAX

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Parody
Forum Contributor
Posts: 252
Joined: Fri May 06, 2005 7:06 pm
Location: Great Britain

Slow AJAX

Post by Parody »

I've made an AJAX application that searches whilst the user types. It's in pre-pre-pre-pre alpha stage so excuse the design and formatting.

The problem is that the text box that the user types the search query into acts really slowly when they type (there is a delay). Test it out at:

http://www.marcusl.com/testing/search.php

If anyone knows why could they please look at the code and tell me what I need to do to make it faster. I'm new to AJAX, but I want to utilise its full potential.

Thanks
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: Slow AJAX

Post by Christopher »

Probably asynchronous calls would help. You also don't need to search until there is a pause in the typing, so you can check the typing interval and not do a request if another keypress comes within that interval.
(#10850)
Parody
Forum Contributor
Posts: 252
Joined: Fri May 06, 2005 7:06 pm
Location: Great Britain

Re: Slow AJAX

Post by Parody »

Asynchronous calls? I understand the idea of AJAX but the functions and stuff evade me. I just copied this from a tutorial and it worked :D. I see what you mean about the typing interval, but how can you tell what is a pause in typing between slow typing or thinking time? It's a shame not everyone can touch-type :(

Why is there a delay on the text box though? It happens when the search results are being requested, but there is no sudden influx in processor or memory usage on the client side so why should the browser act slowly? This has happened on two different computers and different browsers I use so I know it's not just my computer.

As always, all help is appreciated :D
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: Slow AJAX

Post by Christopher »

I would recommend using Prototype, jQuery, mootools, etc. They will have lots of Ajax examples -- probably even one like this that uses async calls, etc.
(#10850)
Parody
Forum Contributor
Posts: 252
Joined: Fri May 06, 2005 7:06 pm
Location: Great Britain

Re: Slow AJAX

Post by Parody »

jQuery is amazing! Thanks arborint! Although there is one slight problem, I realise the difference that asynchronous calls make now, but I need to make it faster still. I know this might be getting annoying now, but could you please point me in the right direction to solve this problem:

Currently
User types letter,
Request for page,
Wait for page (user still typing),
Page recieved (user finished typing, pages trying to catch up)


What I would like
User types letter,
Request for page,
Previous page requests cancelled upon new page request,
Outcome: The results would only be shown when the search result's query is the same as that of the text box (no pile-up of pages)


I'm using this:
http://docs.jquery.com/Ajax/jQuery.ajax#options

But there is no abort or cancel option for previous calls :(

As of the time of this post my script is:

Code: Select all

function ajaxFunction(str){
var prefix = "q=";
if ( req ) req.abort();
var datasend = prefix + str
var req = $.ajax({
   type: "GET",
   url: "search-msn.php",
   data: datasend,
   async: "true",
   success: function(msg){
     document.getElementById("searchpane").innerHTML  = msg;
   }
 });
 }
The abort() doesn't seem to work though.

This would solve the problem once and for all if I could cancel the unwanted calls and so increase the speed!
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: Slow AJAX

Post by Christopher »

Instead of making the Ajax call directly, for each keypress start a timer that will call the Ajax function. For each new keypress, cancel the pending call and start a new timer. That way the Ajax calls happen only after they pause typing.
(#10850)
Parody
Forum Contributor
Posts: 252
Joined: Fri May 06, 2005 7:06 pm
Location: Great Britain

Re: Slow AJAX

Post by Parody »

I'm not trying to be awkward, but I really would like to know how to cancel AJAX calls, not just for this. I understand what you mean about the delaying of the call and how that will increase its efficiency, but if there is only one ajax call out at a time then the server load would be constant, yet no overloaded and the user would have an instant result.

If there is absolutely no way to abort the call then could you please explain how to do a countdown in milliseconds.

I tried:

Code: Select all

function delaysearch(str)
{
var delay = setTimeout(ajaxFunction(str),1000);
}
which just delays each call and doesn't restart each time a key is pressed. I searched for javascript countdown, but all I got was date countdowns.

I really appreciate all the help you've given me arborint :D
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: Slow AJAX

Post by Christopher »

I think the problem might be the variable scope of your req variable.
(#10850)
Parody
Forum Contributor
Posts: 252
Joined: Fri May 06, 2005 7:06 pm
Location: Great Britain

Re: Slow AJAX

Post by Parody »

It works!!!

Thanks arborint!

I promise this is the last problem. The line which causes the delay on searching is an 'invalid argument'. This the surrounding code:

Code: Select all

var delay = "";
function delaysearch(str)
{
delay = setTimeout(ajaxFunction(str),500);
}
and it's this line:

Code: Select all

delay = setTimeout(ajaxFunction(str),500); 
Even without previously defining delay the error occurs.

Help me out one last time arborint :D
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: Slow AJAX

Post by Christopher »

I think you have not read the manual for setTimeout() carefully. ;) It takes an expression, not the return value of that function. So:

Code: Select all

delay = setTimeout("ajaxFunction(\""+str+"\")",500);
(#10850)
Post Reply