DataTable.util.debounce()
Wait for a timeout before calling a function.
Description
This is a utility method that is provided for use by extension and plug-in authors. It provides the ability to create a debounced function that will invoke the given function after a given period of time has elapsed since the last time the debounced function was called.
This can be particularly useful for limiting the number of times a resource intensive operation is performed, while still triggering the action for interactivity. A common example is for use with search input when server-side processing is enabled (serverSide), whereby you might want the search operation to only happen once a user has finished typing, not on every key stroke. This is the method DataTables uses internally for the searchDelay option.
Note that any arguments passed to the returned function, when called, will be passed on to the original function. Additionally, the scope of execution of the original function will match the returned function's scope.
It is similar to its partner function DataTable.util.throttle(), however, in this case it will wait until the end of the sequence of calls to the debounce function before running the original function, whereas throttle will periodically be called even while the wrapper function is still being called.
Type
function debounce( fn, [ wait ] )
- Description:
Wait until a timeout is completed before calling a function, regardless of how many times the wrapper function is called.
- Parameters:
Name Type Optional 1 fnYes - default:false Function that should have its called debounced
2 waitYes - default:250 Delay period after the last call before the function is called - milliseconds (mS).
- Returns:
Wrapper function that can be called and will automatically debounce calls to the passed in function to the given period.
Example
Reduce search API method calls to 1 per second:
var table = new DataTable('#myTable');
var search = DataTable.util.debounce(function (val) {
table.search(val).draw();
}, 1000);
$('#mySearchBox').on('keyup', function () {
search(this.value);
});Related
The following options are directly related and may also be useful in your application development.