Table Of Contents

Waiting for Asynchronous JavaScript Operations to Complete in a Web Application

Last Modified: May 6, 2019

Use asynchronous JavaScript code to wait on tasks or requests while the rest of the code in your WebVI continues to execute.

Synchronous code means that your code executes in order. Asynchronous code means that a portion of your code waits for a task to complete while the rest of your code continues to execute. For more information on JavaScript concepts, refer to JavaScript Resources..

What to Use

  • External JavaScript file
  • JavaScript Library Interface (JSLI) document

What to Do

  1. Create the following code to use an asynchronous JavaScript function in your web application to run two loops in parallel. Customize the following code for your unique programming goals.

    
    (function () {
        'use strict';
    
        /*1*/
        const synchronousDivide = function (numerator, denominator) {
            if (denominator === 0) {
                throw new Error('Cannot divide by zero');
            } else {
                return numerator / denominator;
            }
        };
    
        const sleep = function (time) {
            return new Promise(function (resolve) {
                setTimeout(resolve, time);
            });
        };
    
        /*2*/
        const asynchronousDivide = async function (numerator, denominator) {
            await sleep(1000); /*3*/
    
            /*4*/
            if (denominator === 0) {
                throw new Error('Cannot divide by zero');
            } else {
                return numerator / denominator;
            }
        };
    
        /*5*/
        window.synchronousDivide = synchronousDivide;
        window.asynchronousDivide = asynchronousDivide;
    }());
    
    
    Create a JavaScript function that completes synchronously named synchronousDivide.
    spd-note-note
    Note  

    To notify LabVIEW NXG that a JavaScript error has occurred in a synchronous function, you must throw an error in your JavaScript code. In your diagram code, the error out output on the JSLI node returns a LabVIEW error.

    Create an async JavaScript function named asynchronousDivide.

    An async JavaScript function results in a JavaScript Promise that notifies LabVIEW that the function will run asynchronously.

    The number of parameters in the async JavaScript function should exactly equal the number of parameters configured for the function in the JSLI document. If the JavaScript function has an additional parameter, the parameter may be assigned to the LabVIEW NXG JavaScript API (jsapi) reference. Avoid using the jsapi reference for asynchronous programming.

    Add code that runs asynchronously. This example uses the sleep function which asynchronously pauses execution for 1000 milliseconds.

    Return a value or throw an error from the async function. When using an async JavaScript function for asynchronous programming, returning a value or throwing an error is similar to synchronous programming.

    Add the functions you want to call in your web application to the global scope to make the functions accessible to the JSLI document. In this example, we place both the synchronousDivide and asynchronousDivide functions on the global scope.

  2. Create and configure a JSLI document.
  3. Integrate the JavaScript file into your web application.
  4. Create the following diagram to use the asynchronous JavaScript function to execute two loops in parallel in your WebVI.

    Run the WebVI. The Sync Divide JSLI node executes continuously without waiting.

    The Async Divide JSLI node waits 1000 milliseconds before continuing execution.

    Because the asynchronousDivide function executes asynchronously in your JavaScript code, the second loop doesn't block execution of the first loop. The Async Divide JSLI node behaves synchronously in your diagram code, so you do not need to wait on the asynchronously executing JavaScript code manually in your diagram code.

Recently Viewed Topics