Support

Account

Home Forums Feature Requests Debounce keyup AJAX calls

Solved

Debounce keyup AJAX calls

  • I’ve noticed that with any of the fields that do AJAX lookups using the ‘keyup’ event, it will fire off calls on every single keystroke. This can quickly bog down the server when someone types in more than 4-5 characters in succession. Even though the XHR object is canceled on the front end, the back end will still try to process the original calls to admin-ajax.php so you can end up with 10+ AJAX calls running simultaneously from a single search.

    This is especially obvious on the Relationship field type for sites with many posts. I played around with a 400 millisecond debounce within the ‘change_filter’ method and it greatly improved the response time from the server. Here’s the snippet I used within the ‘change_filter’ method:

    
    clearTimeout( this.debounce );
    
    this.debounce = setTimeout( function() {
    	// update attr
    	self.$el.data(filter, val);
    
    	// reset paged
    	self.$el.data('paged', 1);
    
    	// fetch
    	self.fetch();
    }, 400 );
    
  • I’ll see what I can to about bringing this to the developer’s attention.

  • I agree. This is an issue I’m running into right now with one of my sites. I’d like to see this optimized.

  • Hi @hereswhatidid

    Thanks for the topic.

    Currently, the relationship field will abort any existing ajax request when the fetch function is called (keyup event).

    This should avoid any unnecessary loading, but I’m happy to also add in a timeout as well.

    Leave this with me and I’ll do some testing

  • It does abort the request from the front end’s perspective but the server will still process each of the admin-ajax.php calls. If you put in a debugger breakpoint at the end of the ‘get_choices’ method and then type in a several character search term, it will hit that break point for every character typed even though they were aborted from the browser.

    Once the call to the server is initiated, xhr.abort() will only tell the browser to not wait for a response. The server will still process the initial request.

  • Hi @hereswhatidid

    Thanks for the reply and info.
    I’ll add in the timeout for sure.
    Most likely not 5.2.8, but definitely 5.2.9

  • Hey guys,

    Just wanted to let you know I’ve added in a timeout in v5.2.9 – should be released in the next week.

    Thanks
    E

  • Thanks again! It works great.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.