Debouncing call to LoadOnDemand web service method?

2 posts, 0 answers
  1. Max
    Max avatar
    21 posts
    Member since:
    Apr 2016

    Posted 07 Apr 2017 Link to this post

    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.}
  2. Max
    Max avatar
    21 posts
    Member since:
    Apr 2016

    Posted 07 Feb 2018 in reply to Max Link to this post

    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);
Back to Top