This is a migrated thread and some comments may be shown as answers.

Debouncing call to LoadOnDemand web service method?

1 Answer 115 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Max
Top achievements
Rank 1
Max asked on 07 Apr 2017, 09:37 PM

I have a ComboBox that is querying the database to populate itself using LoadOnDemand and calling a method specified by WebServiceSettings-Method property. It dynamically updates the list based on what the user has typed in the box. Is there a way to "debounce" calls to the web method as making three calls when the user types in three characters instead on one when they finish typing is hitting the database harder than I would like. I have tried setting a debounce timer on the call to my JavascriptOnClientItemsRequesting function, but it seems to not wait on my Javascript timer before calling the web method. Here is my code:

01.<telerik:RadComboBox ID="myDropdown"
02.runat="server"
03.EnableLoadOnDemand="true"
04.IsCaseSensitive="false"
05.MarkFirstMatch="true"
06.Skin="WebBlue"
07.Width="130px"
08.Height="120px"
09.AllowCustomText="true"
10.ShowWhileLoading="false"
11.ItemRequestTimeout="0"
12.ShowDropDownOnTextboxClick="true"
13.ShowToggleImage="false"
14.CssClass="TextBox"
15.EnableVirtualScrolling="true"
16.OnClientBlur="CustComboBoxBlurHandler"
17.DropDownWidth="200px"
18.CloseDropDownOnBlur="true"
19.OnClientItemsRequesting="CustComboBoxSetContext"
20.OnClientSelectedIndexChanged="CustComboBoxSelectedIndexChangedHandler"
21.ClearOnBlur="true" >
22.  <WebServiceSettings Method="Search_GetCustomerNameNosWithJobs" Path="Lookups.asmx" />
23.  <ClientItemTemplate>
24.    <table width="100%" cellpadding="0" cellspacing="0" border="0">
25.      <tr height="12px">
26.        <td>#= Text #</td>
27.        <td>#= Attributes["Name"] #</td>
28.      </tr>
29.     </table>
30.  </ClientItemTemplate>
31.</telerik:RadComboBox>
01.var debounceTimer;
02.var debounceTimeout = 200;
03.function CustComboBoxSetContext(sender, args) {
04.   clearTimeout(debounceTimer);
05.   debounceTimer = setTimeout(SetContext, debounceTimeout, sender, args);
06.}
07. 
08.function SetContext(sender, args) {
09.    var context = args.get_context();
10.    if (!sender.prefix)
11.        sender.prefix = "";
12.    if (!window.event || sender.directcall) {
13.        sender.prefix = args.get_text();
14.    }
15.    var id = sender.get_id();
16.    if (sender.prefix === "") {
17.        args.set_cancel(true); // cancel sever call if nothing typed in
18.        return false;
19.    }
20.    context["prefix"] = sender.prefix;
21.    return true;
22.}

1 Answer, 1 is accepted

Sort by
0
Max
Top achievements
Rank 1
answered on 07 Feb 2018, 05:17 PM

I forgot about this post.
In case anyone needs to know this in the future here is my solution that I blatantly ripped off from the code to underscore.js:

// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
debounceTelerikWebserviceCall(func, wait, immediate) {
    var timeout;
    return function () {
        var context = this, args = arguments;
        var later = function () {
            timeout = null;
            if (!immediate) func.apply(context, args);
            else args[1].set_cancel(true);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
        else args[1].set_cancel(true);
    };
};
 
function SetContext(sender, args) {
    var context = args.get_context();
    if (!sender.prefix)
        sender.prefix = "";
    if (!window.event || sender.directcall) {
        sender.prefix = args.get_text();
    }
    var id = sender.get_id();
    if (sender.prefix === "") {
        args.set_cancel(true); // cancel sever call if nothing typed in
        return false;
    }
    context["prefix"] = sender.prefix;
    return true;
}
 
var debounceTimeout = 200;
CustComboBoxSetContext = debounceTelerikWebserviceCall(SetContext, debounceTimeout);
Tags
ComboBox
Asked by
Max
Top achievements
Rank 1
Answers by
Max
Top achievements
Rank 1
Share this question
or