Load Javascript scripts asynchronously, but ensure they are executed sequentially

I am working with two files named one.js and two.js. The file two.js needs to be executed after one.js, but both files can be fetched in parallel from the server.

To handle this, I stored the response of two.js in a variable, then used eval to run two.js after one.js was resolved. Are there any alternative methods for achieving this?

Answer №1

Implementing the defer attribute can result in:

  • Efficient background downloading of scripts
  • Postponed execution of scripts until after DOMContentLoaded event
  • Maintaining script execution order based on DOM sequence when using multiple defered scripts
<script defer src="one.js"></script>
<script defer src="two.js"></script>

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

The width values in the array are constantly shifting upon refreshing

Would it be possible to create an array called slide_widths, which will contain the widths of all the .slide elements? $( document ).ready(function() { var $slider = $('.slider ul'); var slider_width = $slider.width(); var $slides = $(&apo ...

Nuxt rendering is causing server side state changes to vanish

I'm grappling with a perplexing issue that has me stumped. Allow me to explain the situation in detail. Within my Nuxt project, I have implemented a modular store. There is a global middleware that functions exclusively on the server side (i.e., upo ...

What is the reason for being unable to submit the value of an input that is disabled?

When I try to save the value of an input field that is disabled and has the required attribute, I receive an error message stating that "field_name is required". Why am I unable to insert a value when the input field is disabled? <input disabled type=&q ...

Comparing robust web clients to streamlined web clients

I'm faced with a design decision. For my web (ajax) application, we're debating where to place the user interface logic. One option is to have it completely loaded via javascript (pure single page), with only data coming and going. Alternative ...

Implementing validation and displaying fields with v-model in vue.js

Looking at this code snippet: <button type="button @click="editing=true">Edit</button> <form v-show="editing" @submit="onSubmit"> <textarea v-model="text"></textarea> </form> <div> Current value: {{text}} </ ...

hitting the value of the text input

Is there a way to strike through only the first word in an input box of type text, without editing the html? I've tried using css text-decoration: line-through; but it's striking both words. Any suggestions on how to achieve this using javascript ...

"How to ensure consistent styling for all buttons, including dynamically created ones, in an application by utilizing the jQuery button widget without the need for repetitive calls to

Hello everyone, I am a newcomer to stack overflow and I have a question to ask. Please excuse any errors in my query. I have searched for an answer but have not been successful in finding one so far. Let's say I have a webpage where I am using the jQ ...

Loop through the JSON array and append every value to the list within AngularJS

I'm just starting to learn about Angular JS and I have a question. I receive a JSON array as an AJAX response from a PHP page. I want to iterate through this JSON array and push each value into a list like this: angular.forEach($scope.companies.area, ...

Iterating using a for loop within different functions

I am facing an issue with this project. I am planning to create a function that calculates from two different `for()` loops. The reason behind having 2 separate functions for calculation is because the data used in the calculations are fetched from differe ...

Display the value in multiple constant declarations

Related code: window.onload = function calcPrice() { for(const cloud of Array.from(document.getElementsByName("cloud"))) { fetch("_config/get_value.php?id="+cloud.getAttribute("cloudid")+"&periodicity=monthly") .then(res => res.text()) ...

What are the steps to encode a PNG image with Restlet and then decode it using jQuery?

There is an image located on my Restlet server that I want to transfer to the client for display on the FabricJS canvas. To start on the server side, the image is read as follows: import org.apache.commons.io.FileUtils; private byte[] readImage() { ...

Can I assign a custom form id before manually triggering submission using AJAX?

I have developed an interesting code snippet that uses AJAX to submit a form only if the form has an ID attached to it. $(document).delegate('form', 'submit', function(event) { var $form = $(this); var id = $form.attr('id& ...

Is there a better approach to accomplishing this task using jQuery?

http://jsfiddle.net/bGDME/ My goal is to display only the selected content within the scope and hide the rest. The method I used feels a bit cumbersome. I'm open to suggestions on how to improve this. Any guidance would be greatly appreciated. Tha ...

Ways to switch Bootstrap 5 accordion element using JavaScript

I am using Bootstrap 5's accordion component and I would like to toggle this component from a custom JavaScript function called toggle, preferably without relying on jQuery. <!doctype html> <html lang="en"> <head> <meta ch ...

Reactivity in Vue on dynamically generated HTML elements

Experimenting with Vue 2, I attempted to generate DOM elements in the mounted hook as shown below: <div id="app"> <div id="container"> <label for="static_name">Existing field</label> <input ...

What is the process of enabling scrolling on the main panel once scrolling on the sidebar has concluded?

How can I achieve a scrolling behavior similar to the one demonstrated here? When scrolling through the sidebar, I want it to continue scrolling until it reaches the end. After that, any further scrolling on the sidebar should scroll the main panel inste ...

Discover the method to retrieve the month name from an HTML Date input value

Here we have a date input field <input id="customer-date" name="customer-date" type="date" required> Accompanied by this script const customerDate = document.getElementById('customer-date').value; const dateHandler = document.getElementB ...

What are some methods for extracting a value from a separate webpage and saving it as a variable in my code?

I am utilizing graphite to obtain statistics and would like to display a justgage gauge for a specific variable. Graphite provides values in either JSON format: [{"target": "snmp.ssbSubstation.realEnergy.1", "datapoints": [[4511552439.0, 1417540920]]}] o ...

What is the best way to retrieve all WebSockets present on the current page utilizing Puppeteer in a TypeScript environment?

Is there a way to efficiently gather all WebSockets on the current page in order to easily send messages through them? I've been attempting the following: const prototype = await page.evaluateHandle("WebSocket.prototype"); var socketInst ...

Avoid using single quotes in Postgres queries for a more secure Node.js application

Snippet from my node js code: var qry = 'INSERT INTO "sma"."RMD"("UserId","Favourite") VALUES (' + req.body.user + ',' + JSON.stringify(req.body.favourite) + ')' My problem is inserting single quotes before JSON.stringify(r ...