JavaScript for Time-Sensitive Events

I created a cutting-edge live-tracking website for my school that features two stunning fullscreen graphs, G1 and G2. My goal is to showcase G1 for 10 minutes before switching to G2 for 2 minutes. I brainstormed a possible solution: (Not considering syntax)

hideG1(){ //similar to displaying G2
    G1.hide();
    G2.display();
    setTimeout(hideG2, 10 minutes);
}

hideG2(){ //similar to displaying G1
    G2.hide();
    G1.display();
    setTimeout(hideG1, 2 minutes);
}

However, the instant execution of setTimeout causes a stack overflow error, halting the rest of the code from running smoothly.

Can anyone offer a solution to this dilemma?

javascripttime

Answer №1

It seems like you may have encountered an error in your code. The value <code>2minutes
is not a valid time value or variable name in JavaScript. This is because identifiers cannot start with a number, and when specifying time in milliseconds, numbers should not be preceded by letters.

If you are looking to set a timeout for 2 minutes, the correct syntax would be:

setTimeout(hideG1, 2 * 60 * 1000);

Remember that the time value in setTimeout should always be given in milliseconds.

Additionally, if you are trying to use a method called .display(), it's important to clarify its purpose. If you meant for it to be the opposite of .hide() in jQuery, then it should actually be .show(). Here's an example assuming G1 and G2 are jQuery objects:

function hideG1(){
    G1.hide();
    G2.show();
    setTimeout(hideG2, 10 * 60 * 1000); // 10 minutes
};

function hideG2(){
    G2.hide();
    G1.show();
    setTimeout(hideG1, 2 * 60 * 1000); // 2 minutes
};

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

.value not being grabbed from options of selected index

I have a form that includes a select field with the id of "to". My goal is to retrieve the selected value within a JavaScript function. Interestingly, the first time I execute this function, it fails to capture the selected value. However, upon running t ...

javascripthtml

Creating HTML tags using Kotlin

Looking to generate HTML using Kotlin in the browser, I experimented with the Kotlinx library. However, I found that it lacks support for callbacks like the following: div { onclick = { event -> window.alert("Kotlin!") } } Are there an ...

javascripthtmlkotlinkotlinx-html

Altering CSS attribute values using a random number generator

Is there a way to randomly change the animation-duration attribute in the following CSS code? I want it to range from 0 to 1. @keyframes blink { 50% { border-color: #ff0000; } } p{ animation-name: blink ; animation-duration: 0.1s ; animatio ...

javascripthtmlcss

What distinguishes submitting a form from within the form versus outside of it?

When the code below, you will see that when you click btnInner, it will alert 'submit', but clicking btnOuter does not trigger an alert. However, if you then click btnInner again, it will alert twice. Now, if you refresh the page: If you first ...

javascriptjqueryhtmlforms

Is there a more efficient method to execute this AJAX request?

$('#request_song').autocomplete({ serviceUrl: '<%= ajax_path("trackName") %>', minChars:1, width: 300, delimiter: /(,|;)\s*/, deferRequestBy: 0, //miliseconds params: { artists: 'Yes' }, onSelect: functi ...

javascriptajaxjquery

Tips for utilizing Mongoose populate with a subdocument within the identical model?

This is the model for my latest project. const customHeaderSchema = new Schema({ header: { type: String, required: true, }, }); const customFeatureSchema = new Schema({ title: { type: String, required: true, ...

javascriptdatabasemongodbmongoosenosql

What is the best way to retrieve and utilize this JSON information with D3?

Understanding how to load JSON in D3 is crucial for working with data visualization. The process involves using the following code snippet without encountering any errors: d3.json("sample_data/unique_items.json", function(json) { // do something }); Af ...

javascriptjsond3.js

Effortlessly Transition to Full Screen with Div Expansion on Click

I'm currently working on creating a smooth transition for a div to expand fullscreen when clicked. My goal is to achieve a similar effect as the case studies on this website: Although my code can make the div go fullscreen, there's an issue with ...

javascriptjquerycsscss-animations

Typedi's constructor injection does not produce any defined output

I am utilizing typedi in a Node (express) project and I have encountered an issue related to injection within my service class. It seems that property injection works fine, but constructor injection does not. Here is an example where property injection wo ...

javascriptnode.jstypescriptexpressdependency-injection

Is it possible to have an icon change color in a TableRow column when hovering over any part of that particular row?

I am currently using material-ui version 4.9.5. To illustrate my issue, I have created a simplified example here. I have a Table that is populated with basic JSON data. Each row in the table consists of an icon element along with its corresponding color a ...

javascripthtmlcssreactjsmaterial-ui

What is the best approach for addressing null values within my sorting function?

I created a React table with sortable headers for ascending and descending values. It works by converting string values to numbers for sorting. However, my numeric(x) function encounters an issue when it comes across a null value in my dataset. This is th ...

javascriptjsonreactjs

typescript tips for incorporating nested types in inheritance

I currently have a specific data structure. type Deposit { num1: number; num2: number; } type Nice { num: number; deposit: Deposit; } As of now, I am using the Nice type, but I wish to enhance it by adding more fields to its deposit. Ultima ...

javascripttypescriptinterface

What is the recommended way to modify page within a CATCH block in Node.js and Express?

I've written a short code snippet below that scrapes movie titles from the IMDB website. The code is functioning well with basic error handling using catch. app.get("/", function(err, req, res){ function handleError(err) { console.log('Ohhh ...

javascriptnode.jsexpressasync-awaitpuppeteer

Interactive Javascript dropdown helper on change

I am currently experimenting with a JavaScript onchange method, as I am relatively new to coding. My goal is that when I select "ID Type," the input text should change to "passport," and when I select "South African ID," the input should switch to "South ...

javascriptphpjqueryhtmlangularjs

Is it necessary for me to develop a component to display my Navigation Menu?

After designing a Navigation menu component for desktop mode, I also created a separate side drawer component to handle variations in screen size. However, a friend of mine advised that a side drawer menu component may not be necessary. According to them ...

javascripthtmlreactjs

What is the best way to arrange buttons in a row horizontally?

Desired Output I need help aligning the buttons as shown in the Desired Output image, but when I run the code, the buttons stack vertically, resulting in Output like this. I've included the HTML, CSS, and JS code below. As a beginner in UI design, I ...

javascripthtmlcss

Arrange the text inputs into an array using React Native

This app aims to store TextInputs and color state in an array called listPeople by clicking the Button below using the submitItem function. The TextInputs include name and lastName, which are obtained from the component, and color is retrieved from this.pr ...

javascriptarraysreactjsreact-native

What could be causing the repeated expiration of sessions in ASPX pages for a .NET application?

Currently, I am facing an issue in a .Net chat application where the session is expiring frequently for short durations on my chat room page. I have tried setting the sessionState timeout="540", httpRuntime executionTimeout="999999", and maxRequestLength ...

javascriptc#asp.netsession

Will incorporating A-frame have an impact on the functionality of three.js?

I encountered an issue with my project that utilizes A-frame and three.js, resulting in the following error: Uncaught TypeError: THREE.CSS3DObject is not a constructor To reproduce the error, I used the following sample: The source code for this sampl ...

javascriptthree.jsaframe

Every time I attempt to bootstrap AngularJS and RequireJS, I consistently encounter a dependency injection issue

Recently, I've been working on a single page application using requirejs and angularjs. While I managed to load all the necessary files and run the app smoothly without any conflicts or dependencies from other angular apps, I encountered an error when ...

javascriptjqueryangularjsrequirejssingle-page-application