[JS] te snelle $.ajax call - Blank page

[josjos]

Doel:
Gebruiker typt een deel van een productnaam in en het product met specs komen via een ajax-call terug.
Probleem:
Het script werkt bij langzaam type prima. Zodra je te snel typt verandert de content in de div-box niet meer (en blijft de content van een vorige call staan of word soms een blankpage).

Iemand enig idee hoe ik dit probleem kan omzeilen?

JavaScript:

function showHint(str)
{     
    $.ajax({
      url: "ajax/product.php",
      global: false,
      type: "GET",
      data: ({q : str}),
      dataType: "html",
      async:true,
      success: function(msg){
        document.getElementById("products").innerHTML = msg;
      }
   }).responseText;
}

HTML:

Zoek product: <input type="text" id="txt"  name="zoekproduct" onkeyup="showHint(this.value)" />
<div id="products"></div>

[Bosmonster]

Timeout inbouwen, want nu bombardeer je de server met requests.

Kijk als voorbeeld ook eens hiernaar: http://jqueryui.com/demos/autocomplete/

[ Voor 39% gewijzigd door Bosmonster op 10-02-2011 17:34 ]

[MueR]

Je zal met een delayed request moeten werken. (Google)

[josjos]

Bosmonster schreef op donderdag 10 februari 2011 @ 17:33:
Timeout inbouwen, want nu bombardeer je de server met requests.

Kijk als voorbeeld ook eens hiernaar: http://jqueryui.com/demos/autocomplete/

Dat moet hij toch wel aankunnen?

[MueR]

Daar moet je toch gewoon niet op rekenen?

[BtM909]

josjos schreef op donderdag 10 februari 2011 @ 17:34:
[...]

Dat moet hij toch wel aankunnen?

Blijkbaar kan je server dat toch niet aan

[RobIII]

En ondertussen komt dit haast wel wekelijks voorbij. Is je zoekfunctie misschien stuk?

josjos schreef op donderdag 10 februari 2011 @ 17:34:
[...]

Dat moet hij toch wel aankunnen?

De enige die dat kan beantwoorden (los van 't feit dat je niet bij elke keystroke een request moet willen doen) ben jij hoor Hoe moeten wij weten wat je server allemaal moet uitspoken aan queries en verschillende lagen aan logica om tot een response voor je AJAX request te komen. For all we know duurt elke request 5 seconden om te beantwoorden. En voor 'tzelfde geld kan je server 500.000 requests per seconde afhandelen...

[ Voor 51% gewijzigd door RobIII op 10-02-2011 18:40 ]

[Bosmonster]

josjos schreef op donderdag 10 februari 2011 @ 17:34:
[...]

Dat moet hij toch wel aankunnen?

Of je server het aankan is eigenlijk niet eens een issue (al bij jou blijkbaar wel). Het is gewoon onnodig. Als je snel typt is 90% van je requests namelijk gewoon zinloos.

[BARO]

Je zou het bijvoorbeeld als volgt kunnen maken:

JavaScript:

function showHint(str)
{
  clearTimeout(ajaxCallTimeout);
  ajaxCallTimeout = setTimeout(function(){
    $.ajax({ 
      url: "ajax/product.php", 
      global: false, 
      type: "GET", 
      data: ({q : str}), 
      dataType: "html", 
      async: true, 
      success: function(msg){ 
        document.getElementById("products").innerHTML = msg; 
      } 
    }).responseText;
  }, 500);
}

[orf]

Je kunt ook eerdere requests cancellen. Moet je wel zeker weten dat je server ze niet alsnog helemaal afhandelt door een ignore_user_abort() (PHP) of iets dergelijks.

[crisp]

orf schreef op donderdag 10 februari 2011 @ 21:35:
Je kunt ook eerdere requests cancellen. Moet je wel zeker weten dat je server ze niet alsnog helemaal afhandelt door een ignore_user_abort() (PHP) of iets dergelijks.

Beter is gewoon om zoveel mogelijk te voorkomen dat zinloze requests naar de server worden gestuurd...

[R4gnax]

BARO schreef op donderdag 10 februari 2011 @ 21:29:
Je zou het bijvoorbeeld als volgt kunnen maken:

[...]

Of zet het throttle-gedrag op met deze plugin: http://benalman.com/proje...throttle-debounce-plugin/
Is het gelijk netjes modulair.