Running Functions Out of Order in JavaScript - An exploration of Asynchronous Execution

Question

Running Functions Out of Order in JavaScript - An exploration of Asynchronous Execution

I've been working on understanding how to manage the execution order of my script using asynchronous functions and promises. Despite going through numerous resources, I'm still struggling with getting it to work as expected:

My approach involves having a Vue.js object that contains methods, and triggering a series of async functions when the app is mounted:

var testAPP = new Vue({
    el: '#test-app',
    data: {

    },
    // Methods code here...
})

The anticipated output sequence should be like this:

User story goes here.
Expected console log output.
More user stories...

However, the actual result doesn't match the expected order, showing immediate logs instead of the delays between steps.

Despite trying different methods, including adjusting promise returns and function dependencies, the issue persists.

Why are my functions not honoring the specified order within the async process?

Any insights or suggestions would be greatly appreciated!

Here's the simple HTML setup used for testing in Edge:

<!DOCTYPE html>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script type="text/javascript" src="path/to/your/script.js"></script>

javascript vue.js

Answer 1

Answer №1

Your code utilizes `await` without the necessary `async` keyword

first_step: async function() {  // <-- remember to use async keyword
  console.log('Interacting with my dog!')
  return this.fake_fetch() // <-- make sure to include a return statement
    .then((data) => {
      let compliment = "Buddy is a " + data
      console.log(compliment)
      return ("nap.")
    })
    .then((data) => {
      return new Promise((resolve) => {
        setTimeout(() => {
          console.log("Taking a break with " + data);
          resolve(true)
        }, 20000)
      })
    })
}

Answer 2

Your code utilizes `await` without the necessary `async` keyword

first_step: async function() {  // <-- remember to use async keyword
  console.log('Interacting with my dog!')
  return this.fake_fetch() // <-- make sure to include a return statement
    .then((data) => {
      let compliment = "Buddy is a " + data
      console.log(compliment)
      return ("nap.")
    })
    .then((data) => {
      return new Promise((resolve) => {
        setTimeout(() => {
          console.log("Taking a break with " + data);
          resolve(true)
        }, 20000)
      })
    })
}

Running Functions Out of Order in JavaScript - An exploration of Asynchronous Execution

Answer №1

Similar questions

I attempted to publish my React application using gh-pages and encountered the following error: "The argument for 'file' must be a string. However, it was received as undefined."

Do you have to host a node server to run Angular applications?

Corrected typing mistakes using vuex

Guide on positioning a span element to the left using the margin auto property in CSS for Angular 4

What is the best way to align a badge icon regardless of the avatar's size?

Selenium automating the process of clicking a button without a defined name or id

JavaScript: Creating a Function that Returns an Object with an Undefined `this.variable`

Steps to invoke a function to add an element into a list

What could be causing my THREE.js Documentation Box to malfunction?

The display of 'App' seems to be experiencing issues within the render method

When utilizing TypeScript with Nuxt3, the error message "Module '#imports' or its corresponding type declarations could not be found" may be encountered

Breadcrumb navigation that is determined by data hierarchies and relationships between parent and child items

Issue with Vuex getters not properly returning data

Executing a child component function once the parent component data is loaded in Angular 5

Issues with AngularJS Validation not functioning properly with File Inputs marked as 'Required'

Disabling vertical scrollbar in textarea within Bootstrap modal using CSS, jQuery, and C# in .NET MVC framework

Attention: Vanishing within specified time limit

Using double parentheses in JavaScript

The interaction between jQuery and Rails through ajax calls

In Cytoscape.js, Chrome is having trouble selecting nodes