Is it possible to create a synchronous behavior for an asynchronous JavaScript method using async-waterfall?

In my JavaScript application, I have three function calls. The second one is asynchronous, causing some issues as it completes after the third one. Here's how it looks:

function runner() {
    function1();
    function2(); //This is the asynchronous one
    function3();
}

This timing problem is impacting the functionality of my application. Currently, I am working with pure JavaScript and searching for a reliable solution to ensure that these functions run in sequence without delving into callback complexities. My initial idea was to explore the use of async-waterfall, but since my application runs in the browser rather than Node, I need an alternative approach. Any suggestions would be greatly appreciated.

javascriptasynchronous

Answer №1

If you find yourself unable to adjust your functions to work with promises or accept callbacks, one workaround is to implement an interval to monitor the completion of function2. While not ideal, this approach can still be effective.

However, some may argue that this method is even messier than dealing with callback hell.

var checkCompletion = function(test, success) {
  var iv = setInterval(function() { 
    if (test()) { 
      clearInterval(iv); 
      success();
    }
  }, 500);
}

var isFunction2Finished = function() {
  //insert logic here to determine if function2 is done
}

performAction1();
performAction2();
checkCompletion(isFunction2Finished, performAction3);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to represent objects in a user interface?

Currently, I have some information stored in the following format: data : { full_name: 'John Doe', date_of_birth: '01-01-1990' } I am looking to display this data in a table-like format that resembles: Full Name: John Doe Date Of B ...

javascriptreactjs

The condition is not being recognized after clicking the third button

When the button is clicked for the first time in the code snippet below, all divs except for the red one should fade out. With each subsequent click, the opacity of the next div with a higher stack order should be set to 1. Everything works fine until the ...

javascripthtmlcssif-statementopacity

jQuery encountering TypeError while attempting to retrieve JSON data

Attempting to retrieve JSON data from the following URL using the provided code snippet: $.ajax({ type: "GET", url: "https://covid.ourworldindata.org/data/owid-covid-data.json/", success: function (data) { $("h5").e ...

javascriptjqueryjson

What is the best way to add style to the title attribute of a dropdown menu item?

In my webform project, I have implemented a dropdown menu with custom tooltips for the list items. These tooltips are different from the display field and value field, which can be considered as the third column. To bind the tooltips to the list items usin ...

javascriptc#jquerycsswebforms

issue encountered when implementing slick.js in angular 6

Trying to implement slick.js, a carousel framework, in an Angular project. Initially attempted 'npm install slick --save' and manually adding the downloaded files to scripts and styles JSON objects. When that failed, resorted to importing the C ...

javascriptjqueryangularslick.js

How can I display a nested dropdown list within a form using JSON data in React?

Utilizing material ui and formik, I have integrated a form that requires a selection box with nested options to be displayed as shown in the image linked here. (The value selected needs to be submitted upon form submission) https://i.sstatic.net/02AI2.png ...

javascriptjsonreactjsformsmaterial-ui

Having difficulty launching a new window within an app built with Electron and Nexjs (Nextron)

Attempting to launch a (Nextjs-generated) page in a new window is causing an error message to appear: Uncaught ReferenceError: global is not defined Here is the full error: react-refresh.js?ts=1665849319975:10 Uncaught ReferenceError: global is not de ...

javascriptreactjsnext.jselectron

Troubleshooting a Custom Menu Control in HTML

Would you mind taking a look at the menu I have set up in this fiddle: http://jsfiddle.net/Gk_999/mtfhptwo/3 (function ($) { $.fn.menumaker = function (options) { var cssmenu = $(this), settings = $.extend({ title: "Menu", ...

javascripthtmlcssmenuhtml-lists

What is the best method for displaying a radio button as selected based on a variable value?

I have a variable that stores the value of a radio button. After checking certain conditions, I want to dynamically select the radio button based on this value. if(cheque_date == system_date) { cheque_value='Current'; } else { cheque_value ...

javascriptphpjquerycodeigniter

Activating the loader dismiss command will transition the swiper to the current page

Having a swiper and loader makes the scenario very straightforward. The loader is initialized whenever calculations are performed, and after successfully obtaining the result, the loader turns off and swipes to the second slide. <swiper-container #sl ...

javascriptangularionic-frameworkswiper.jsloader

What causes React useEffect dependency to be seemingly overlooked?

My React component contains two useEffect hooks. One of these should only run when a value stored in context is updated. However, I'm noticing that this hook runs even before the context value changes, and I can't figure out why. Below are the c ...

javascriptreactjsreact-hooksdependenciesreact-context

Cities cannot be obscured by a rotating globe

In my latest project, I have created a jsfiddle showcasing a Bostock spinning globe implementation. After successfully plotting a few city markers, I encountered a problem where not all cities were being displayed. Additionally, the script intended to hid ...

javascriptcssd3.js

Simultaneously opening the second submenu and closing the previous submenu with a height transition results in the second submenu being positioned off-screen

Sample: https://codesandbox.io/p/sandbox/navbar-k2szsq (or refer to the code snippet below) In my navbar, I have implemented multiple submenus with a height transition when the user opens or closes a submenu. However, only one submenu can be open at a tim ...

javascripthtmljquerycss

Open a new lead form in Crm 2013 by clicking a button and automatically passing the details of the

I have integrated an Add New Lead button into the main form on the Homepage for contacts. Clicking this button triggers a script that opens a new form and passes "Crm Parameter FirstSelectedItemId" as a parameter. By selecting a contact and clicking crea ...

javascriptjsondynamics-crm-2011dynamics-crmdynamics-crm-online

Applying CSS classes to a custom AngularJS directive: A step-by-step guide

Need to have a CSS class called tab for the nav HTML element, which will be used as a directive: <nav tab></nav> The expected interpretation is: <nav class="tab"> <a></a> <a></a> <a></a> ...

javascripthtmlcssangularjsangularjs-directive

Developing JavaScript code for preventing blocking

Managing a large number of file requests from a tiny server has been a challenge for me. With approximately 100 files to fetch, my current approach using JavaScript's forEach loop is causing the server to crash due to the heavy load. links.forEach ...

javascriptnode.jsasynchronoussynchronous

show a notification once the maximum number of checkboxes has been selected

I came across this code snippet from a previous question and I'm interested in making some modifications to it so that a message can be displayed after the limit is reached. Would adding a slideToggle to the .checkboxmsg within the function be the mos ...

javascriptjquery

The most efficient and hygienic method for retrieving a value based on an observable

Looking at the structure of my code, I see that there are numerous Observables and ReplaySubjects. When trying to extract a value from one of these observables in the HTML template, what would be the most effective approach? In certain situations, parame ...

javascriptangulartypescript

Remove a specific date entry from the database using VUE JS and Axios

I am encountering a challenge with Vuejs as I work on a To-Do list. The tasks need to be stored in a MySQL database, and I also want the ability to delete tasks. While I have succeeded in importing and creating data, I'm facing difficulty in deleting ...

javascriptsqlvue.jsaxiosform-data

Ways to set up various Content-Security-Policies and headers in your application?

In my email application, I am trying to prevent alerts in JavaScript by using a CSP header. However, even with the current policy in place, alerts can still execute when I send an HTML document attachment that contains script tags. Changing all JavaScript ...

javascripthtmlsecurityxsscontent-security-policy