The popularity of AJAX in JavaScript is continuing to rise

Question

The popularity of AJAX in JavaScript is continuing to rise

I am facing an issue with my website that features a configurable 3D object with various properties. Whenever I reload the div containing the 3D object to reflect new properties, the script data keeps adding on. This not only slows down the functionality after around 30 reloads but also causes unexpected behavior. For example, I recently added rotation to the object rendering function, and with each reload, the rotation button starts spinning faster. After just 5 reloads, it spins out of control. The spinning function in question is quite simple:

    function animate() {
    if (typeof(objektas) !== 'undefined') {
        rotation++;
        if (rotation >= 360) rotation = 0;
        objektas.rotation.y = rotation * Math.PI * 2 / 360;
    }
    requestAnimationFrame(animate, renderer.domElement);
    renderer.render(scene, camera);
}

I suspect that with every reload, these animate functions are stacking up, causing them to be called multiple times instead of once. Can anyone provide insights on how to resolve this issue?

javascript jquery ajax three.js

Answer 1

Answer №1

Utilizing recursion, the animate function continuously reinvents itself, creating a perpetual loop.

Each time the function is reloaded, another instance of the animate loop is initiated. This results in multiple intertwining loops on the UI thread, causing the rotation variable to increment at an accelerated rate.

If invoked repeatedly, these interweaving loops can lead to significant performance issues. The key to resolving this is ensuring that the function is only called once from the initial invocation point.

One approach is to introduce a global variable:

var hasCalledAnimate = false;

Subsequently, modify the first invocation as follows:

if(!hasCalledAnimate) {
   hasCalledAnimate = true;
   animate();
}

To prevent any possibility of a second call, utilize closures:

var animate = (function () {
       function _animate() {
           if (typeof(objektas) !== 'undefined') {
               rotation++;
                if (rotation >= 360) rotation = 0;
               objektas.rotation.y = rotation * Math.PI * 2 / 360;
           }
           requestAnimationFrame(_animate, renderer.domElement);
           renderer.render(scene, camera);
       }
       var _hasInvoked = false;
       return function () {
           if (!_hasInvoked) {
               _hasInvoked = true;
               _animate();
           }
       }
   })();

This revised version ensures that animate remains truly idempotent, allowing for multiple calls while guaranteeing the loop is initiated just once.

Answer 2

Utilizing recursion, the animate function continuously reinvents itself, creating a perpetual loop.

Each time the function is reloaded, another instance of the animate loop is initiated. This results in multiple intertwining loops on the UI thread, causing the rotation variable to increment at an accelerated rate.

If invoked repeatedly, these interweaving loops can lead to significant performance issues. The key to resolving this is ensuring that the function is only called once from the initial invocation point.

One approach is to introduce a global variable:

var hasCalledAnimate = false;

Subsequently, modify the first invocation as follows:

if(!hasCalledAnimate) {
   hasCalledAnimate = true;
   animate();
}

To prevent any possibility of a second call, utilize closures:

var animate = (function () {
       function _animate() {
           if (typeof(objektas) !== 'undefined') {
               rotation++;
                if (rotation >= 360) rotation = 0;
               objektas.rotation.y = rotation * Math.PI * 2 / 360;
           }
           requestAnimationFrame(_animate, renderer.domElement);
           renderer.render(scene, camera);
       }
       var _hasInvoked = false;
       return function () {
           if (!_hasInvoked) {
               _hasInvoked = true;
               _animate();
           }
       }
   })();

This revised version ensures that animate remains truly idempotent, allowing for multiple calls while guaranteeing the loop is initiated just once.

The popularity of AJAX in JavaScript is continuing to rise

Answer №1

Similar questions

`How can I incorporate personalized animations on Google Map V3 Markers as they are individually dropped on the map?`

There is an issue as headers cannot be changed after being set for the client

Creating movement in three distinct divisions

Ways to fix the error message 'yarn package has unresolved peer dependency'

"Exploring ways to reattempt a route request upon encountering the $stateNotFound event within AngularUI Router

I'm having trouble with Material Design Slide Toggle as it lacks event.StopPropagation functionality. Any suggestions on what alternative I

Interactive Bar chart updates in real-time with Highcharts and AngularJs

Use jQuery's .each method to reiterate through only the initial 5 elements

submit a new entry to add a record to the database

Tips for obtaining accurate response from axios

Unable to make an AJAX call to a Spring controller

Why won't the infowindow close when I press the close button in the markercluster of Google Maps API v3?

Adding local JavaScript to a Vue component is a great way to enhance its functionality

posting data and redirecting fails when using an ajax button

Display an input field in VueJS with a default value set

Tips for efficiently exporting and handling data from a customizable table

Out of the blue synchronization issues arising from utilizing the nodejs events module

javascript Incorrectly using location.reload will not refresh the page as intended

What is the best way to set the theme for Material-UI in a React application?

Tips for incorporating external JavaScript code into React components