JavaScript code causing the page to freeze

Question

JavaScript code causing the page to freeze

I am attempting to track the movement of a dynamic div (which is animated using CSS3 animations) by continuously monitoring its position. To achieve this, I have implemented a loop utilizing while(true) as shown below:

function detectCollision(){

    alert(document.getElementById("obstacle").style.left)

    while(true){
        var temp = getObstaclePosition();

        var temp2 = getPlanePosition();
        if(temp[0] <= temp2[0]+500){
            document.getElementsByClassName("plane")[0].style.display = "none";
            break;
        }
    }
}

The issue arises after displaying the first alert since the page becomes unresponsive. Additionally, introducing an alert within the while loop results in continuous popping alerts but ensures that the code functions correctly. How can I address this problem?

javascript html css

Answer 1

Answer №1

A more efficient alternative to a while (true) loop is using the setInterval method:

b = setInterval(() => {
    let obstaclePos = getObstaclePosition();
    
    let planePos = getPlanePosition();
    
    if(obstaclePos[0] <= planePos[0] + 500) {
        document.querySelector(".plane").style.display = "none";
        clearInterval(b);
    }
}, 100);

Answer 2

A more efficient alternative to a while (true) loop is using the setInterval method:

b = setInterval(() => {
    let obstaclePos = getObstaclePosition();
    
    let planePos = getPlanePosition();
    
    if(obstaclePos[0] <= planePos[0] + 500) {
        document.querySelector(".plane").style.display = "none";
        clearInterval(b);
    }
}, 100);

Answer 3

Answer №2

The element's position remains static within the loop, causing the page not to render and leading to an infinite loop.

To achieve this functionality, you can utilize either a recursive setTimeout or a traditional setInterval.

These methods allow for one iteration per timeout period.

https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout

Answer 4

The element's position remains static within the loop, causing the page not to render and leading to an infinite loop.

To achieve this functionality, you can utilize either a recursive setTimeout or a traditional setInterval.

These methods allow for one iteration per timeout period.

https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout

Answer 5

Answer №3

When running JavaScript, it operates within a single thread. This means that if a loop is stuck in an infinite loop, it will prevent the rest of the code from executing.

Instead of using a traditional loop, another option is to utilize setInterval, which allows for the repetitive execution of a function or code snippet:

setInterval(new function() {
    // insert desired code here
}, 100); // repeat every 100 milliseconds, equivalent to 10 times per second

Answer 6

When running JavaScript, it operates within a single thread. This means that if a loop is stuck in an infinite loop, it will prevent the rest of the code from executing.

Instead of using a traditional loop, another option is to utilize setInterval, which allows for the repetitive execution of a function or code snippet:

setInterval(new function() {
    // insert desired code here
}, 100); // repeat every 100 milliseconds, equivalent to 10 times per second

JavaScript code causing the page to freeze

Answer №1

Answer №2

Answer №3

Similar questions

I am experiencing issues with md-no-focus-style not functioning correctly in my configuration

The installation of [email protected] for Firebase in expo-cli React Native did not succeed via npm

When utilizing CKEditor in conjunction with ExpressJS, HTML tags may be displayed in the browser

The unfortunate timing of the multi-material design lite snackbar

Creating Dynamic Panel Animations in XUL for Your Firefox Extension

How do I access and read a map within an array from Firebase using ReactJS?

Error: Unable to locate corresponding closing tag for "<%"

Opt for JavaScript DOM manipulation over jQuery for element selection without depending on jQuery

Using Vue.js: Is there a way to apply scoped CSS to dynamically generated HTML content?

Ensure that JavaScript functions are executed sequentially without overlapping

Repeated Identification Numbers in Mongoose Database

Unable to retrieve member information using Three.js in TypeScript

What's the best way to adjust the height of a textarea to completely fill the column?

JavaScript - unique user-defined data types - what skills do I need and what knowledge should I acquire?

Choose all stylus/css imports except for those with a specific ending

Issue with close request on dialog box

Ensure that you accurately maintain object ids following the creation of elements using ng-repeat

Issue encountered in Meteor/React app: Error message "ReferenceError: require is not defined" or "Error: Cannot

Creating an interactive timer that counts down in real-time using a combination of Django and JavaScript

Husky 5: The Ultimate Gitignore Manager