"Uncovering the dangers of XMLHttpRequest: How automatic web-page refresh can lead

Hello, I have been developing a web interface for some hardware that utilizes an 8-bit microcontroller. The webpage includes HTML, JavaScript, JSON, and XHR (XMLHttpRequest) for communication purposes. My goal is to create a page that updates every 250 milliseconds with fresh data from the controller using setInterval, giving the user a 'real-time' experience akin to an application. Although I managed to make it work mostly fine, I encountered a memory leak issue in the code while testing on both IE and Chrome browsers. After conducting some research online, I discovered that others have faced similar problems and attempted different solutions without much success. Below are snippets of the code to provide a clearer understanding, with slightly altered variables for context: // initiate the page refresh timer to update values var pageRefreshTimer = window.setInterval(updateValues, 250); // Standard XHR opener HTTP.getText = function(url, callback) { var request = HTTP.newRequest(); // functionality to locate standard XMLHttpRequest functions not shown... request.onreadystatechange = function () { if (request.readyState == 4 && request.status == 200) { callback(request.responseText); } } request.open("GET", url); request.send(null); } // Function continuously refreshed by HTML page for simulating real-time application updateValues = function(parameter, value) { newURL = newURL + "?" + parameter; // Send the URL and generate the JSONObject HTTP.getText(newURL, function(JSONText) { var JSONObject = eval('(' + JSONText + ')'); // Assign object values to JavaScript variables Controller.detectorPosition = JSONObject.detectorPosition; Controller.offset = JSONObject.offset; Controller.actuatorPosition = JSONObject.actuatorPosition; }); delete JSONObject; // Attempted manual garbage collection but did not fix the memory leak } For reference, the JSON file sent from the microcontroller would resemble this form: { "offset": "1500", "detectorPosition": "1558", "actuatorPosition": "120" } Could there be a problem linked to "closures" in the code? While using Developer Tools in Chrome (Ctrl-Shift-J), I noticed multiple calls made to the ParameterValues.json file (350B size) as expected since this holds the values from the microcontroller. However, could the browser be exceptionally storing/caching each page in memory? In my comments below, two screenshots illustrate the issue. In one instance, setting up a break-point in the XMLHttpRequest loop revealed what seemed like a circular reference in the "closure" panel on the right side. Does anyone spot a problem here? How can I delve deeper to gather more information? Thank you in advance!

Answer №1

A team at Google Code has developed a universal implementation of the XMLHttpRequest object that works across different web browsers. They also keep track of known bugs related to native XMLHttpRequest implementations, which could be beneficial for your project.

One particular bug that might impact you is as follows:

Bug: Memory leaks may occur if an instance of XMLHttpRequest is not properly garbage collected when there are references to it or other COM objects (such as DOM Nodes) in its onreadystatechange handler.

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

XState: linking together multiple promises seamlessly without needing intermediate states

After reading the Invoking Multiple Services section, it seems that despite being able to invoke multiple promises, they appear to be triggered without waiting for the previous one to complete in my own tests. // ... invoke: [ { id: 'service1' ...

Determining with jQuery if the right element has been successfully "dropped"

Imagine having 10 different draggable boxes and 2 droppable areas. You need to correctly match 5 boxes with droppable area 1 and the other 5 with droppable area 2. If a box intended for droppable area 1 is mistakenly dropped into area 2, it should not wor ...

The MVC4 API routing system is able to locate a specific action, yet struggles to find a

I'm currently working with an MVC4 api controller that looks like this: public class VisitorController : ApiController { private ApplicationDbContext db = new ApplicationDbContext(); public Visitor Get(int id) { return db.Visitors ...

I am having trouble getting the filter functionality to work in my specific situation with AngularJS

I inserted this code snippet within my <li> tag (line 5) but it displayed as blank. | filter: {tabs.tabId: currentTab} To view a demo of my app, visit http://jsfiddle.net/8Ub6n/8/ This is the HTML code: <ul ng-repeat="friend in user"> ...

Switch up the appearance of a document by manipulating the stylesheet using a select tag

I'm currently facing an issue with the implementation of a drop-down box on my website for selecting different themes. Despite having the necessary javascript code, I am unable to get it working correctly. Here's the snippet: //selecting the sele ...

``When executing the `npm install` command, it does not install the sub-dependencies of a local package

I am facing an issue with my packages. One package named package-a has a dependency on another package called package-b which is not published on npm but resides in my file system. When I try to run npm install from the directory of package-a, the dependen ...

Is the `beforeEach` function in Jasmine synchronized?

Is it guaranteed that multiple beforeEach functions will always run sequentially? beforeEach(function() {}); beforeEach(function() {}); beforeEach(function() {}); beforeEach(function() {}); beforeEach(function() {}); It appears they do. I conducted a tes ...

Capybara in Rails performing render action post form submission

Within my Rails controller, I have the following code: def update render @bill if @bill.update(bill_params) end In the form, I am using remote true to load the render on the page via AJAX. However, when running Capybara tests, the following code is us ...

Step-by-step guide for launching a Next.js/Node application

Currently, I am developing a full-stack project utilizing a next.js application for the front-end and a node/express server for the API. The front-end and back-end are running on separate ports. Here is how my application is configured: https://i.stack.im ...

I'm facing an issue with this error message - DiscordAPIError: Unable to send a message that is empty. How can I

What's the solution to this issue? Error: UnhandledPromiseRejectionWarning: DiscordAPIError: Cannot send an empty message Code: let y = process.openStdin() y.addListener('data', res => { let x = res.toString().trim().split(/ +/g) ...

Having trouble with jQuery variable assignments not working in Safari?

My jQuery 1.3.2 code is encountering issues with Safari 4 for reasons unknown to me. Even though all my javascript references are placed right before the closing <body> tag, I am facing difficulties with the following snippet: var status = $(' ...

Visibility of Code in AngularJS

After inspecting the source code of a website built with Angular today, I came across a snippet that made me ponder whether it's advisable to have such elements visible to everyone. ul class="nav-account desktop-only" ng-show="!User.isAuthenticated" ...

Unable to retrieve scope data in controller function

Having trouble accessing the scope attribute fullName from the controller method login. What could be causing this issue? App.controller('LoginController', ['$scope', 'LoginService', '$location', function(scope, Log ...

Decode the implicit list in JSON format provided by the keys "1" and "2"

After retrieving this JSON data from an API, I need to convert it into a Java object. Here is the JSON structure: { "message" : "message", "1": { "packageCode": "packageCode1", " ...

The location of the CHROMEDRIVER for Node.js with Selenium

After trying "npm install selenium-webdriver", I am still encountering the error message below. Can anyone provide guidance on where the path is supposed to be located? Error: The ChromeDriver could not be found on the current PATH. Please download the ...

Using Vue Router's `push()` method within an asynchronous function will solely modify the URL address

I created a custom loading component that displays while the route is being changed. To ensure the loading component properly waits for a second, the method needs to be asynchronous. However, since implementing this feature, I noticed that the router.push ...

Tips for inserting an AJAX response into the corresponding list item:

When the page loads, I am attempting to send an ajax request that will fetch data for each li element by extracting the href link inside them using the jQuery each() method to generate a dynamic URL for the ajax request. Although I am able to retrieve dat ...

What is the best way to retrieve information from a JSON string?

I am currently receiving a JSON object from the backend and I only need the "result" array in my Angular application template variable. { "result":[ {"name":"Sunil Sahu", "mobile":"1234567890", "emai ...

Retrieve the input data following validation of an AngularJS form

Hello there! I am relatively new to utilizing AngularJS and Bootstrap. Recently, I have created a login form using AngularJS and Bootstrap CSS. Below you will find the code for my form: <form name="userForm" ng-submit="submitForm(userForm.$valid)" nova ...

Utilizing Angular Components Across Various Layers: A Guide

Consider the following component structure: app1 -- app1.component.html -- app1.component.ts parent1 parent2 app2 -- app2.component.html -- app2.component.ts Is it possible to efficiently reuse the app2 component within the ap ...