such a problem. I am writing a smart search on the site, when I click on the button I send a request for a sample of the database.
For example, I enter the word "table", the request leaves for the word "hundred", then I enter the letter "l" and the request leaves with the word "table".
Then the request with the word "table" comes faster, and after it comes the answer of the request "one hundred" and, accordingly, overrides the answer I need. Is there any way out?
here is the code

$(document).on('keyup', '#fastcat', function () { var ad = $(this); $.ajax({ type: "GET", url: "/ajax/fastcat?q=" + ad.val(), beforeSend: function () { if (ad.val().length > 1) { $(".fastcat_auto").removeClass('visible'); $('.fastcat_div .loader').show(); } }, success: function (html) { $('.fastcat_div .loader').hide(); if (html != 'fail') { $('.fastcat_auto').html(''); $('.fastcat_auto').html(html); $(".fastcat_auto").addClass('visible'); } else { if (ad.val().length > 1) { $('.fastcat_auto').html('<ul><li>Ничего не найдено.</li> </ul>'); $(".fastcat_auto").addClass('visible'); } } } }); });
  • Alas, life did not give us extrasensory abilities. Can you show the code? - ikerya
  • Yes, only if you say how to write it in the comments. There is a “code” in the question, but I never figured out the comments - Anatoly
  • insert into the message, select the code and click on the image {} - ikerya
  • corrected the question - Anatoly
  • one
    @ikerya, the usual callback race, when quickly sending requests, no one guarantees that the answers will come in the same order that they were sent - Grundy

3 answers 3

It's simple. When receiving an answer, check what was sent, whether it corresponds to the current value of the input.

Pseudocode:

 function search(){ var query = $edit.val(); $.ajax("?search="+query) .done(data => if(query!=$edit.val()) return; pupulate(data);); }
  • Your answer helped. I would like to know where you got the knowledge about jquery. Your syntax is different from what I know, I would like to show myself. - Anatoly
  • @Anatoly all write code in their own way - ikerya
  • @Anatoly is pseudocode in ecmascript 6 style (with errors in syntax), the main thing is the idea. - Yura Ivanov

Try when entering characters in a text field every 200 milliseconds (if necessary, you can quickly) check whether the time of the current request matches the time_passed variable (it changes when you enter characters in the text field).

 var time_passed = 0; function sendRequest(ad) { $.ajax({ type: "GET", url: "/ajax/fastcat?q=" + ad.val(), beforeSend: function () { if (ad.val().length > 1) { $(".fastcat_auto").removeClass('visible'); $('.fastcat_div .loader').show(); } }, success: function (html) { $('.fastcat_div .loader').hide(); if (html != 'fail') { $('.fastcat_auto').html(''); $('.fastcat_auto').html(html); $(".fastcat_auto").addClass('visible'); } else { if (ad.val().length > 1) { $('.fastcat_auto').html('<ul><li>Ничего не найдено.</li> </ul>'); $(".fastcat_auto").addClass('visible'); } } } }); } $(document).on('keyup', '#fastcat', function (e) { var typed_time = new Date().getTime() / 1000; time_passed = typed_time; setTimeout(function() { if(time_passed == typed_time) { sendRequest($(e.currentTarget)); } }, 200); });
  • then the idea of ​​a quick search disappears altogether ... - Anatoly
  • try again) - ikerya

Option with delaying the launch of the request:

 var filterTimer, timeout = 500; $(document).on('keyup', '#fastcat', function () { var ad = $(this); clearTimeout(filterTimer); filterTimer = setTimeout(function(){ $.ajax({...}); }, timeout); });

This method does not solve the main problem of the order of requests, but reduces the possibility of its reproduction, by reducing the number of requests and increasing the time between them.

An alternative solution is to build a queue of requests, for example:

 var queue; $(document).on('keyup', '#fastcat', function () { var adVal = $(this).val(); if(!queue){ queue = $.ajax({ ... url: "/ajax/fastcat?q=" + adVal, beforeSend: function () { if (adVal.length > 1) {...} } ... }); }else{ queue.done(function(){ return $.ajax({ ... url: "/ajax/fastcat?q=" + adVal, beforeSend: function () { if (adVal.length > 1) {...} } ... }); }); } });