Table Of Contents

Waiting for Asynchronous JavaScript Operations to Complete in a Web Application

Last Modified: October 2, 2018

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*/
       var synchronousDivide = function (numerator, denominator) {        
          if (denominator === 0) {
              throw new Error('Cannot divide by zero');
          } else {            
              return numerator / denominator;
          }    
       }; 
       
       /*2*/    
       var asynchronousDivide = function (numerator, denominator, jsapi /*3*/) {
          var cb = jsapi.getCompletionCallback(); /*4*/
          
          var divide = function () {
              if (denominator === 0) {
                 cb(new Error('Cannot divide by zero'));
              } else {
                 cb(numerator / denominator);
              }        
          };
    
          setTimeout(divide, 1000); /*5*/    
       }    
    
       /*6*/
       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 a new error object in your JavaScript code. In your diagram code, the error out output on the JSLI node returns a LabVIEW error.

    Create a JavaScript function that completes asynchronously named asynchronousDivide.

    Add an extra parameter to the function you want to call asynchronously. You can choose any name for this parameter. In this example, we name the extra parameter jsapi.

    When you add an extra parameter to the function in your JavaScript file, the number of parameters in your JavaScript file will be one greater than the number of parameters in the JSLI document. LabVIEW NXG compares the number of parameters in the external JavaScript function to the number of parameters in the function in your JSLI document. If the number of parameters in the function in your JavaScript file is one greater than the number of parameters in the same function in the JSLI document, the extra parameter becomes the LabVIEW NXG JavaScript API (jsapi) reference.

    The jsapi reference allows you to access the getCompletionCallback function.

    Use the jsapi reference to invoke the getCompletionCallback function.

    The getCompletionCallback function returns a callback function that takes the return value of the JavaScript function as its sole input. In this example, we name the callback function cb. Consider the following information when using callback functions.
    • To notify LabVIEW NXG that an asynchronous function is complete, you must always invoke a callback function.
    • If you configure the return parameter in the JSLI document to be of a type other than void, you must pass a return value of the type you configured in the JSLI document to the callback function.
    • To notify LabVIEW NXG that a JavaScript error has occurred, you must pass a new error object to the callback function.

    Add code that will invoke the callback function asynchronously. In this example, we use the setTimeout function to call the divide function asynchronously 1000 milliseconds in the future.

    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