• Resolved mulmer

    (@mulmer)


    I have server side functions running with live updates and a slider input. When sliding the slider the browser makes high frequency calls to the backend. Would it be possible to add a debouce time so that a call is made at most every 300 ms or so?

Viewing 1 replies (of 1 total)
  • Plugin Author CodePeople2

    (@codepeople2)

    Hello @mulmer

    If you require controlling when a specific equation is evaluated, you have multiple alternatives.

    I’ll try to describe the process with a hypothetical example:

    Assuming you have two slider fields in the form: fieldname1 and fieldname2, and you implemented the server side equation “sum_fields”. Also, you inserted the calculated fieldname3 whose equation is:

    SERVER_SIDE('sum_fields', fieldname1, fieldname2);

    However, you don’t want to call the server side equation immediately. You want to call it one second after the user stops sliding the slider field.

    First option:

    You can use the “cffProxy” operation in the equation by editing it as follows:

    (function(){
    function delayEquation(f1, f2, callback) {
    if ( 'flag' in window ) clearTimeout(flag);
    flag = setTimeout(function(){
    let result = SERVER_SIDE('sum_fields', f1, f2);
    callback(result);},
    1000
    );

    };
    return cffProxy(delayEquation, fieldname1, fieldname1);
    })()

    Learn more about the cffProxy operation by reading the following blog post:
    https://cff.dwbooster.com/blog/2019/05/17/third-party-connection-module

    The second option is to stop the dynamic evaluation of the equation, and evaluate it manually from an “HTML Content” field:

    1. Select the calculated field “fieldname3” and tick the box attribute “Do not evaluate dynamically” in its settings. Now, this specific equation won’t be evaluated dynamically.
    2. Insert an “HTML Content” field in the form, tick the box in its settings to support scripts, and finally enter the following script code in its content.

    <script>
    fbuilderjQuery(document).on('formReady', function(){
    let field1 = getField('fieldname1');
    let field2 = getField('fieldname2');
    fbuilderjQuery(document).on('change', '[name="'+field1.name+'"],[name="'+field2.name+'"]', function(){
    if('flag' in window) clearTimeout(flag);
    flag = setTimeout(function(){EVALEQUATION('fieldname3')}, 1000);
    });
    });
    </script>

    Best regards.

Viewing 1 replies (of 1 total)

You must be logged in to reply to this topic.