3

I'm encountering a very strange issue with an onkeyup function. Depending how fast the person types, the function that is triggered by typing may run multiple times. 

var inputFilter = document.getElementById('inputFilter');
inputFilter.onkeyup = function(e, value) {
e.preventDefault();
 value = e.target.value
   if (value.length >= 3) {
     console.log(value);
      getItems(value);
   }
};

If I type slowly, the getItems() function runs perfectly, but if I type really fast it behaves strangely. The getItems() function pulls data from a SharePoint list using Ajax(XMLHttpRequest()), and creates a table with the results. If I type slowly, the table is just fine, but if I type fast, each table row duplicates. I added to the getItems() function a body.innerHTML = '' to make sure it empties the table's body with each run of of the function:

 const table = document.getElementById('smeTable'),
 body = table.getElementsByTagName('tbody')[0];
 body.innerHTML = '';

I'm not a programmer, and probably will get many down votes for this probably silly question, but I'm puzzled by this issue. Any ideas would be appreciated. Thank you.

cubanGuy
  • 1,226
  • 3
  • 26
  • 48
  • 1
    Have you tried onkeypress? – radulle Mar 11 '20 at 15:12
  • 1
    You need either a faster server and connection, or you've to wait until user stops writing, and then make the trip to the server. – Teemu Mar 11 '20 at 15:14
  • 1
    It is more likely that there is a problem with the `getItems` function then that a listener's callback function is triggered multiple times for the same event. – Titus Mar 11 '20 at 15:15
  • 1
    It's always a good idea to implement `debounce/throttle` method for keyup events if it does an http call each time. – Shawn Yap Mar 11 '20 at 15:18
  • Thanks all for the help. Implementing `debounce/throttle` was the right approach. I'll post the solution once I'm allowed to answer my own question, which I think is a couple of days. Although I see that was questioned was marked `duplicate`. Not sure how that will affect people from seeing the answer. – cubanGuy Mar 11 '20 at 16:51

1 Answers1

1

That probably happens because you are producing a lot of ajax requests in a short period of time and since the responses are async, response to the previous keyUp events might load after the response from current keyup and it might mess things up, especially if you are pulling some autocomplete results.

What I would usually do is abore previous ajax request when creating a new request. You can follow an answer from here on how to abort the previous request: Abort previous ajax request on new request

 var currentRequest = null;    

currentRequest = jQuery.ajax({
    type: 'POST',
    data: 'value=' + text,
    url: 'AJAX_URL',
    beforeSend : function()    {           
        if(currentRequest != null) {
            currentRequest.abort();
        }
    },
    success: function(data) {
        // Success
    },
    error:function(e){
      // Error
    }
});
Nick Surmanidze
  • 1,671
  • 1
  • 11
  • 20