3 replies to this topic

[ferovac]

So i have a live search, on my web page.


And the search gets executed on $.keyup event.

so if one wants to search for lets say "javascript"

Requests to the server would be send as the user types like so :
1. j
2. ja
3. jav
4. java
5. javas
6. javasc
7. javascr
....

thats a lot of traffic for my server.

So what im trying to do is implement a "delay" function in javascript that would delay the ajax call, and then if another call to that function is made the current call it dropped

for example :

if i write in a textbox "j" a function will be called

but then when i add "a" in the textbox , the same function will be called again

how can i stop the second function from executing , and increase the time the first function will wait before execution of ajax???

here is my code for it :

var ajaxTime ;


	$("#query").keyup(function(){


	//	$("#results").load(basicSearch+getQuery());

	//	return false;

		

		clearTimeout(ajaxTime);

	

		if(lastValue == $("#query").val() || $("#query").val() == "")

		{

			return false;

		}

		else

		{

			lastValue = $("#query").val();

		}


		ajaxTime = setTimeout(

			function(){

			

				$.get(basicSearch,{"query":$("#query").val()}, function(data){

					$("#results").empty();

			

					if(data == null)

					{

						$("#results").append("<div>Nothing was found!</div> ");

						return false ;

					}

				

					for(i=0;i<data.length;i++)

					{	

						$("#results").append(getResultView(	data[i]['id'],

															data[i]['title'],

															data[i]['authors'],

															data[i]['subtitle'],

															data[i]['logo'],

															data[i]['edition_info'],

															data[i]['edition'],

															data[i]['identified'],

															data[i]['orig_filename'],

															data[i]['isbn']));

					}

				}, "json");

			}

		,1000);

	});

[ferovac]

as it turned out my solution works, all i had to do is move the clearTimeout() right before the seTimeout() call


but if anyone has any suggestions on how to do this in a better manner or sees any possible problems with the current solution plz let me know .

[ferovac]

Now im having a new problem here is the code , its all inside "document.ready" function :

	function getJson(){

			

				$.get(basicSearch,{"query":$("#query").val()}, function(data){

					$("#results").empty();

			

					if(data == null)

					{

						$("#results").append("<div>Nothing !</div> ");

						return false ;

					}

				

					for(i=0;i<data.length;i++)

					{	

						$("#results").append(getResultView(	data[i]['id'],

															data[i]['title'],

															data[i]['authors'],

															data[i]['subtitle'],

															data[i]['logo'],

															data[i]['edition_info'],

															data[i]['edition'],

															data[i]['identified'],

															data[i]['orig_filename'],

															data[i]['isbn']));

					}

				}, "json");

				queried = false ;

			}


	$("#query").keyup(function(){


	//	$("#results").load(basicSearch+getQuery());

	//	return false;

	

		if(lastValue == $("#query").val() || $("#query").val() == "")

		{

			return false;

		}

		else

		{

			lastValue = $("#query").val();

		}

		

		clearTimeout(ajaxTime);

		ajaxTime = setTimeout("getJson()",1000);

	});

And here is the error i get when invoking a .keyup event :

Quote

[18:54:36.919] getJson is not defined @ http://localhost/ddb...y.custom.js:137

looks like the setTimeout function is having a problem with the getJson function

Edited by ferovac, 27 May 2011 - 06:58 AM.

[ferovac]

Also fixed !

IF anyone cares, the solution is .....

line :

ajaxTime = setTimeout("getJson()",1000);

replace with :

ajaxTime = setTimeout(function(){getJson()},1000);