Waiting for Asynchronous JavaScript Operations to Complete in a Web Application

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 in a JavaScript (.js) file 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. Note To notify G Web Development Software 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 an error.
   	Create an async JavaScript function named asynchronousDivide. An async JavaScript function results in a JavaScript Promise that notifies G Web Development Software that the function will run asynchronously.
   	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 uses syntax 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.