How To Resolve Race Conditions On Debounced User Input?

For example, say a page returns search results based on debounced user text. How do you account for the case where an endpoint has a highly variable latency in which the second cal

Solution 1:

We suppose that you use jQuery to make ajax calls.

One solution is to use a pooling system: basically an array containing ajax requests. Each time, a new request is emitted, you abort all request in the pool. So you ensure that the last request made will be the only one that will end.

Here is the implementation of the pool:

jQuery.xhrPool = [];
jQuery.xhrPool.abortAll = function () {
    jQuery(this).each(function (idx, jqXHR) {
        jqXHR.abort();
    });
    jQuery.xhrPool.length = 0;
};

Here is an example on how to use it with the "search repository API" from GitHub (https://developer.github.com/v3/search/#search-repositories):

jQuery.xhrPool = [];
jQuery.xhrPool.abortAll = function () {
  jQuery(this).each(function (idx, jqXHR) {
    jqXHR.abort();
  });
  jQuery.xhrPool.length = 0;
};


$(document).ready(function(){
  $("#SearchField").autocomplete({
    source: function( request, response ) {
        // First we abort all other request
        jQuery.xhrPool.abortAll();
      
        $.ajax({
          url: "https://api.github.com/search/repositories",
          method: "get",
          dataType: "jsonp",
          data: {
            q: request.term
          },
          beforeSend: function (jqXHR) {
            // Before sending the request we add it to the pool. 
            jQuery.xhrPool.push(jqXHR);
          },
          success: function(data) {
            var items = new Array();
            for(var i=0;i<data.data.items.length;i++)
            {
              items.push(data.data.items[i].name);
            }
            response(items);
          }
        });
      },
      minLength: 3,
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link  href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" >
<input type="text" id="SearchField" />

Solution 2:

Javascript works synchronously so there is no possibility of race conditions if you write your code correctly.

I guess you are using ajax (ajax is supposed to be async, don't use sync ever, once you go sync, you can't go back) to get the query result. You are probably using some code like this:

var req=new XMLHttpRequest();


req.onreadystatechange=function(){
    if (req.readyState==4){
        if (req.status==200){
            // Your callback here which shows autocomplete suggestions maybe?
        }
    }
}

Hold on to that req variable. So once you do a new request, you can simply discard the old request like:

req.onreadystatechange=null;

You can also abort the ajax request like:

req.abort();