The initial invocation of the JavaScript function did not run

In my Grails view, I have a script tag set up like this:

<script type="text/javascript">

        /* the first setInterval */
    setInterval(
      function()
      {
        console.log("Test...");
      },
      5000
    );

    setInterval(
      function()
      {
        console.log("Test... (2)");
      },
      5000
    );

    GetContent(1);
    GetContent(2);
    GetContent(3);
    GetContent(4);

    setInterval(
      Test0,
      5000
    );

    setInterval(
      Test2,
      5000
    );

    setInterval(
      ShowTime,
      1000 * 10
    );

    setInterval(
      Test3,
      1000 * 9
    );

    setInterval(
      Test1,
      1000 * 8
    );

</script>

Curiously, the first setInterval function is not being executed as expected. Despite showing up in the html view source, it seems to be skipped over during execution.

Even when I duplicate the first setInterval function call, only one instance of it is actually run.

The console output displays "Test..." just once every 5000 milliseconds.

Could there possibly be a bug related to Grails causing this issue?

Answer №1

To ensure that my JavaScript function calls are executed properly, I simply need to bind them to the document's ready event.

<script type="text/javascript>


$(document).ready(
  function()
  {

    /* Setting up multiple setInterval functions */
    setInterval(
      function()
      {
        console.log("Test...");
      },
      5000
    );

    setInterval(
      function()
      {
        console.log("Test... (2)");
      },
      5000
    );

    GetContent(1);
    GetContent(2);
    GetContent(3);
    GetContent(4);

    setInterval(
      Test0,
      5000
    );

    setInterval(
      Test2,
      5000
    );

    setInterval(
      ShowTime,
      1000 * 10
    );

    setInterval(
      Test3,
      1000 * 9
    );

    setInterval(
      Test1,
      1000 * 8
    );

  };

</script>

With this adjustment, all functions now run as expected.

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

Can phantomJS be used to interact with elements in protractor by clicking on them?

While attempting to click a button using PhantomJS as my browser of choice, I encountered numerous errors. On my first try, simply clicking the button: var button = $('#protractorTest'); button.click(); This resulted in the error: Element is ...

`The value of an element within an array changes automatically`

In my current setup, I have a traditional array where each element represents an HTML element. The issue arises when I manipulate these elements within the array; any changes made to the HTML element also reflect in the array automatically. However, I pref ...

"Exploring the power of asynchronous programming with dynamic async await in

I am currently working on creating a versatile function that can dynamically call async functions. //passing the controller and functionName (string) function asyncAwaitCaller(controller, functionName) { let result = await controller[functionName]; } ...

Using React's useEffect and useContext can cause issues with certain components, particularly when dealing with dynamic routes

Currently, I am developing a React blog application where posts are stored in markdown files along with metadata in Firestore. The content .md files are saved in Cloud Storage. In the App component, I utilize useEffect to retrieve the metadata for each pos ...

Link that updates periodically linked to an image

My goal is to have a URL change on a timer that is linked to an image. For example, after 10 seconds, I want the URL attached to the image to change without changing the actual image itself. I've been trying to figure out how to modify this code, but ...

Limiting Velocity in a Two-Dimensional Spacecraft

Like many others diving into the world of programming, I decided to challenge myself with a spaceship game project. At this point, I have successfully incorporated parallax stars and other essential features expected in a space-themed game. The spacecraft ...

Creating unsightly class names using Node.js

Is it possible to automatically create random and unattractive class names? For example, is there a tool or plugin that can substitute the .top-header class with something like .a9ev within my CSS code? It would also be ideal if the class name in the HTML ...

I am able to access the JSON file from the URL without any issues, but for some reason, I am unable to fetch it using $

(function(){ $(document).ready(function(){ $.getJSON('http://dev.markitondemand.com/MODApis/Api/v2/Quote/json?symbol=AAPL&callback=?', function(){console.log("function was run");}); }); }()) I recently delved into working with APIs. Ho ...

Exploring JavaScript capabilities with Google - managing and updating object names with numbers

After importing JSON data into Google Scripts, I am able to access various objects using the code snippet below: var doc = Utilities.jsonParse(txt); For most objects, I can easily retrieve specific properties like this... var date = doc.data1.dateTime; ...

Sending back an HTTP response code from PHP to AJAX

I'm currently working on creating a login page for a website. The functionality involves using AJAX to send a request to a PHP script that verifies the username and password input. If the query returns a successful result, I use http_response_code(200 ...

Is it possible to implement a validation process that prevents the opening of a modal using data-bs-target until all necessary

I am currently using bootstrap version 5.2.3 and I have encountered an issue where the modal opens regardless of validation rules being met or not. I attempted to modify the data-bs-toggle and data-bs-target attributes using Vue.js, but the changes did no ...

Arranging an array in alphabetical order, with some special cases taken into consideration

Below is a breakdown of the array structure: [{ name: "Mobile Uploads" }, { name: "Profile Pictures" }, { name: "Reports" }, { name: "Instagram Photos" }, { name: "Facebook" }, { name: "My Account" }, { name: "Twi ...

Sending back an array within the onOpen function

I am currently in the process of developing a chat application. At this stage, users are able to send messages to each other and I have successfully stored these messages in my database. Now, my objective is to display the stored messages from the database ...

Creating a delayed queue using RxJS Observables can provide a powerful and

Imagine we have a line of true or false statements (we're not using a complicated data structure because we only want to store the order). Statements can be added to the line at any time and pace. An observer will remove items from this line and make ...

Generate a visually dynamic representation of a live website page

I'm curious if it's possible to create a login page similar to the one shown in this image, using HTML, CSS, and Javascript. Instead of a traditional background image, I want the background to display the actual layout of another website, such a ...

Encountering issues with browser tabs and Socket.IO

I'm currently working on a real-time chat using Socket.IO, but I've encountered a major issue. The aim is to allow users to log in, select another connected user, and start chatting... var http = require('http'), fs = require(&ap ...

Ui Bootstrap (angularjs) sidebar is not functioning properly

I am encountering an issue with a sidenav that I am in the process of creating for one of my projects. The goal is to develop a side menu that shifts the content to the right when opened and returns it to the left when closed, essentially functioning as a ...

"Placing drop-down animations in just the right spot

I'm currently working on adjusting the dropdown behavior for thumbnails when hovering over them. I want the drop-down to appear beneath the 'Caption Title' instead of above the image, but so far my CSS adjustments haven't been successfu ...

Is it possible to change the transition behavior within a Vue component?

Is there a way to modify or replace transitions within a Vue component? I am currently using Buefy components for my website, but I have encountered an issue with certain components like collapse that have a slot with a fade transition that I do not pref ...

Exploring the colors of legend navigation icons in Google Pie charts

Is there a way to customize the color of the navigation links in Google pie charts (specifically the blue text in the bottom right corner)? ...