Debounce keyup AJAX calls

• hereswhatidid

• July 12, 2015 at 3:55 am

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 );

• John Huebner

• July 14, 2015 at 3:54 am

I’ll see what I can to about bringing this to the developer’s attention.

• jrwdev

• July 14, 2015 at 4:14 am

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

• Elliot

• July 15, 2015 at 10:37 am

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

• hereswhatidid

• July 15, 2015 at 11:51 pm

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.

• Elliot

• July 16, 2015 at 9:29 am

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

• hereswhatidid

• July 21, 2015 at 6:07 am

Great, thanks!

• Elliot

• July 23, 2015 at 3:56 pm

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

• hereswhatidid

• August 13, 2015 at 7:19 am

Thanks again! It works great.