Breadcrumb

Global JavaScript (used in examples below)

// Clears the content of a given {regionID}.
function clear(regionID) {
    $('#' + regionID + ' .alert-result .t-Alert-body').html('');
}

// Prints the {result} of an AJAX call to a given {regionID}.
function print(regionID, result) {
    $('#' + regionID + ' .alert-result .t-Alert-body')
        .append(JSON.stringify(result) + '
');
}

// launches the AJAX process "wait" which hangs for {seconds}
async function ajaxHang(seconds) {
    // apex.server.process implements the JavaScript Promise interface
    return apex.server.process(
        "hang", {
            x01: seconds
        }
    );
}

AJAX Process: hang

declare  
    l_now timestamp := systimestamp;
    l_end_time timestamp;
    l_sec number;
begin  
    l_sec := apex_application.g_x01;
    
    l_end_time := l_now + numtodsinterval (l_sec, 'second');

    while(l_end_time > l_now) loop
        l_now := systimestamp;
    end loop;

    apex_json.open_object;
    apex_json.write('success', true);
    apex_json.write('x01', l_sec);
    apex_json.close_object;
exception  
    when others then
        apex_json.open_object;
        apex_json.write('success', false);
        apex_json.write('message', sqlerrm);
        apex_json.close_object;
end;

Example 1) Run 1 AJAX process

Code

// This example invokes one AJAX process using the async/await feature 
async function example1() {
    clear('example1');
    
    // invokes ajaxHang(1) which takes 1 second until it's done (PAUSE)
    var result = await ajaxHang(1);

    // prints the result to the region
    print('example1', result);

    // Right here we have waited a total of 1 second:
    //    1 seconds for ajaxHang(1)
}

Result

Example 2) Run 2 AJAX processes consecutively

Code

// This example invokes two AJAX processes consecutively using the async/await feature
async function example2() {
    clear('example2');
    
    // invokes ajaxHang(1) which takes 1 seconds until it's done (PAUSE)
    var result1 = await ajaxHang(1);

    // prints the result to the region
    print('example2', result1);
    
    // invokes ajaxHang(2) which takes 2 seconds until it's done (PAUSE)
    var result2 = await ajaxHang(2);
    
    // prints the result to the region
    print('example2', result2);
    
    // Right here we have waited a total of 3 seconds for the sum of all AJAX calls
    //    1 second for ajaxHang(1)
    //    2 seconds for ajaxang(2)
}

Result

Example 3) Run 2 AJAX processes simultaneously

Code

// This example invokes two AJAX processes simultaneously using the async/await feature
async function example3() {
    clear('example3');
    
    // invokes result 1 and result 2 at the same time
    var result1 = ajaxHang(1);
    var result2 = ajaxHang(2);

    // The results are printed in order as the AJAX calls return
    print('example3', await result1);
    print('example3', await result2);

    // Right here we have waited a total of 2 seconds because of ajaxHang(2)
    //    1 second for ajaxHang(1)
    //    2 seconds for ajaxHang(2)
}

Result

Example 4) Run X number of AJAX processes simultaneously

Code

// This example invokes X number of AJAX processes using the async/await & Promise.all feature
async function example4() {
    clear('example4');
    
    // invokes result1, result2 and result3 at the same time
    var result1 = ajaxHang(1);
    var result2 = ajaxHang(2);
    var result3 = ajaxHang(3);

    var results = await Promise.all([result1, result2, result3]);

    // The results are printed all at once, when all AJAX calls have returned
    print('example4', results);    

    // Right here we have waited a total of 3 seconds becuase of ajaxHang(3):
    //    1 second for ajaxHang(1)
    //    2 seconds for ajaxHang(2)
    //    3 seconds for ajaxHang(3)
}

Result