Reduce Repeated Calls with Throttling and Debouncing
Throttling and debouncing are two techniques you can use to reduce repeated and unnecessary calls to APIs and other functions. Both techniques reduce the number of calls made, although in different ways:
-
Throttling applies a rate limit to the number of calls that can occur over a period of time. For example, one call per second.
-
Debouncing causes a function to wait a certain amount of time before running again. In this way, it limits the rate at which a function is invoked.
If you are implementing custom code that makes quick repeated calls, whether to an API or a function, you should consider using throttling or debouncing to minimize the performance impact. If you do not use throttling or debouncing, there can be massive performance implications for your Commerce website.
How SuiteCommerce Implements These Techniques
One of the core libraries SuiteCommerce uses is Underscore.js. SuiteCommerce relies on two of this library’s methods, appropriately named throttle() and debounce(), to perform throttling and debouncing. To learn more about these methods, review the Underscore.js documentation for each:
Throttling
As a reminder, throttling does not stop calls going through, but instead applies a rate limit to them. As a developer, instead of passing a function directly to where it is going to be called, you pass it wrapped, like so:
_.throttle(function, wait, [options])
where wait is an integer of milliseconds. The following example logs a message to the console one time every second, regardless of how many times it is called during that time:
_.throttle(function log () {
console.log('Noisy logs!');
}, 1000);
You can pass in {leading: false} and/or {trailing: false} to prevent the first and last calls made.
If you have a function that tracks mouse movements and executes code each time the mouse moves, you may want to throttle the inputs so that the JavaScript only fires a limited number of times over a set period. Doing so minimizes the impact to the user’s device.
Debouncing
By default, the debounce function blocks the first and all succeeding calls until they stop, and then calls using the most recent request. This technique is a good fit for API calls because you typically only want one call to go through, and for that call to contain the user-submitted data from the most recent request.
To use debouncing, follow this syntax:
_.debounce(function, wait, [immediate])
The immediate parameter is optional, but if you specify true for this parameter, the debounce function passes the first call and blocks all subsequent calls. The immediate parameter works well for use cases like Submit buttons.
Consider this example:
_.debounce(function log () {
console.log('This will only show when you stop calling me!')
}, 1000);
If the preceding code is bound to a method and repeated calls are made to that method, it waits 1000 milliseconds (1 second) before logging a message to the console.
You can use the debounce function for type-ahead search results. When a user begins to type a keyword to search for, requests are sent automatically after the third character is entered. As the user types keywords, more requests are sent. This can lead to a potentially high number of unnecessary requests.
For example, if the final keyword that the user enters is jackets, then jac, jack, jacke, and jacket would all be requested before the user finished typing, but results are not needed for those entries. So in a case like this, you want to debounce the calls by waiting until the user has finished typing (or, at least, waiting a short delay) and then search using the final keyword they entered.