JavaScript's method of organizing website loading sequences

I am currently facing a challenge with my web page that features a chart displaying a large amount of data using a 3rd party flash component.

The issue arises when a significant portion of the data is lazy loaded and added to the chart via AJAX post initial page load. As this process takes place, the entire page freezes multiple times until all the data has been fully loaded. This becomes troublesome because it creates a false impression of completion upon the page's initial loading, only for the freeze to occur during the subsequent AJAX data loading phase.

An example of this issue can be seen in an setInterval function I have implemented that increments a clock every second. Unfortunately, even this clock visually freezes during the AJAX loading sequence.

My question is: How can I prevent these freezes? Would you suggest a different approach to handle the loading structure?

Answer №1

It's interesting how JavaScript being single-threaded can cause user interface freezes when processing data. The key is to break the data processing into smaller chunks and use setTimeout(fn, 0) to push them onto the event queue periodically.

For example:

http://jsfiddle.net/VT4Rs/

In this case, adjusting the chunk size variable allows for optimization based on the browser's actual performance. This way, you can prevent stalls and missed intervals while ensuring smooth processing of the data.

Check out this updated example to see the difference:

http://jsfiddle.net/Sjk29/

By dynamically adjusting the chunk size based on performance, you can optimize the process and avoid UI freezes. JavaScript offers plenty of flexibility in handling such scenarios effectively!

Answer №2

Consider utilizing html5 instead of flash for your plotting needs, as this could potentially resolve any issues with freezing. Here are some resources you can explore:

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

Tips for sending information to select2 version greater than 4.0

I'm exploring the use of select2 for the first time and wondering if someone could assist me. I want to pull data from a static array. Can you offer any guidance on how to achieve this? This is the code I currently have: $(document).ready(function( ...

Using router.get with a redirect in Express

Can you directly invoke a router.get(...) function in Express? Let's say I have a router.get('/my-route', function(req, res) { ... });, is it feasible to then, within another part of my code, use res.redirect('my-route'); with the ...

Ways to dynamically toggle visibility and hide elements by clicking outside the specified div

I have a div that, when clicked, displays a contact us form. This form toggles between being visible and hidden. How can I make it hide when clicked on another part of the document? Here is the code: function showContactForm(){ var formWidth = &apos ...

Tips for retrieving the selected option from a dropdown list using ReactJS

Currently, I am attempting to extract the value of a dropdown menu structured like this: <ul className="tabs" data-component={true}> <li> <section className="sort-list" data-component={true}> <select value={0} class ...

Switch up image transitions using Javascript

I have already completed the css and html structure for my project. However, I am encountering issues with the JavaScript functionality. I really like the image effect on this website: (the blue one). I have attempted to replicate it here: , but have bee ...

Creating a universal function to handle setTimeout and setInterval globally, inclusive of clearTimeout and clearInterval for all functions

Is it possible to create a universal setTimeout and setInterval function with corresponding clearTimeout and clearInterval for all functions while passing values to them? The situation is as follows: 1. More than 8 functions utilizing setInterval for act ...

asynchronous ajax resolution

When I send multiple ajax requests simultaneously, the arrival time of the results is unpredictable and causing issues for me. Here's the problem I'm facing: Every time I click on a TAB button created with HTMLElement, it triggers an ajax call. ...

Issues with the Tumblr platform's back-to-top button functionality

I am quite comfortable with HTML and CSS, but I'm struggling to make the 'back to top' button work on my Tumblr page. Can someone please give me a hand? I've included some JQuery code to make the text fade in and out when scrolling (inf ...

What is the best way to transfer form data stored locally to a Django view and then store it in the database?

Is there a way to transfer form data from an offline website to a Django view for database storage? I want to fill out a form, save it in local storage, and then upload the data to the database when I reconnect to the internet. Is there a tutorial or can ...

Protractor is having difficulty finding the specified element or value

Here is some HTML code snippet: <tab id="briefcase" ng-controller="BriefcaseController as vm" active="main.uiState.briefcaseOpen"> <tab-heading> <i class="glyphicon glyphicon-briefcase"></i><br> ...

The error in creating a Firebase user is detected following the execution of the 'then' block

I created a signup page in my Vue app where users can input their information. Once the input is validated, I use firebase auth to add the user. Upon successful sign up, I want the page to automatically navigate to the login page. Here is the code for my s ...

Poorly formatted mui table representation

I have utilized the Table component from @mui/material and referenced the documentation at https://mui.com/material-ui/react-table/. To reproduce the issue, I have created a static table with fixed values. Here is the code snippet: <TableCo ...

Expanding Bootstrap 5 navbar-nav to occupy entire screen space in collapsed state

Hello everyone, I hope you are doing well! I am currently working on a website project using Bootstrap 5 and have encountered an issue with the navbar toggler. While the toggler is functioning properly, I am having trouble making it fill the full width o ...

`Uniform background color across all pages`

My goal is to allow customers to select a color that will persist across different pages on the website. The code below shows how users can choose a color on the first page: <select id="color" style="width: 5%; height: 10%" size="5"> ...

Save the user input to a dedicated text file

I am working with a couple of select tags that generate an array. Previously, I was only logging the array to the console upon pressing the SUBMIT button, but now I want to save it to a separate text file. Here is my main.html code: <form method="POS ...

Having difficulty with launching a new browser popup using JavaScript

I'm exploring ways to redirect users using JavaScript and open a new browser popup in Chrome/FF/Safari and IE. I need to wait for the response with the correct URL after the button click. While solutions like creating a new popup before the request a ...

step-by-step guide for resolving issues with downloading files in node.js

I've been attempting to download files from my server using node.js with the res.download function from Express, but I keep getting an undefined error. The folder path is D:\program\web\java_script\Node\my_project\ketabk& ...

Selling beyond webpack's confines

Today I had an interesting thought and couldn't find much information on it, so I decided to share some strange cases and how I personally resolved them (if you have a better solution, please feel free to comment, but in the meantime, this might be he ...

Troubleshooting: Why Files are Not Being Served by

I have noticed that there have been similar questions asked about this topic before, but I couldn't find a solution to my problem by reading the responses. I am trying to get my Node.js app to serve my files, and it seems like the page is correctly r ...

Can you please explain the differences between "resolved" and "rejected" in a deferred object within jQuery?

Recently, I inquired about a refreshing page solution if an internet connection is available on Stack Overflow. The user @Fabrizio Calderan provided an elegant approach utilizing deferred object implementation: setInterval(function() { $.when( ...