JavaScript execution triggers DOM repaint in Chrome

Question

JavaScript execution triggers DOM repaint in Chrome

For my upcoming course catered towards beginners with no programming experience, I want to demonstrate basic DOM-manipulation without involving async programming or callback functions.

I came up with the following idea:

function color(element, color) {
    element.style = "background: " + color + ";";
}

function wait(milliseconds)
{
  var e = new Date().getTime() + (milliseconds);
  while (new Date().getTime() <= e) {}
}

function disco() {
    var body = document.getElementById("body")
    color(body, "red")
    wait(500)
    color(body, "darkGreen")
    wait(500)
    color(body, "darkBlue")
}

disco()

While this script runs smoothly, the UI fails to update until the function completes, resulting in a blue background without showing red or green. Is there any way to trigger a repaint during the function execution?

I understand that this approach is not ideal for practical use, but my goal is to make it easy for newcomers to understand.

javascript google-chrome

Answer 1

Answer №1

While you wait anxiously, the browser remains idle. This method is highly discouraged. Instead, consider setting up your party like this.

var body = document.body;
var colors = [ "purple", "teal", "gold" ];
var nextColor = 0;

function changeColor(element, color) {
    element.style = "background: " + color + ";";
}

function newColor() {
    changeColor(document.body, colors[nextColor%colors.length];
    nextColor++;
}

function discoLights() {
    setInterval(newColor, 500);
}

Please be aware that this snippet serves as a demonstration and has not been extensively tested.

Answer 2

While you wait anxiously, the browser remains idle. This method is highly discouraged. Instead, consider setting up your party like this.

var body = document.body;
var colors = [ "purple", "teal", "gold" ];
var nextColor = 0;

function changeColor(element, color) {
    element.style = "background: " + color + ";";
}

function newColor() {
    changeColor(document.body, colors[nextColor%colors.length];
    nextColor++;
}

function discoLights() {
    setInterval(newColor, 500);
}

Please be aware that this snippet serves as a demonstration and has not been extensively tested.

Answer 3

Answer №2

If you want to add some color-changing effects to your webpage, you can achieve it using setTimeout and style.backgroundColor instead of the provided functions color() and wait(). Check out this custom disco function I created:

function disco(){

    var body = document.getElementById("body");
    var time = 0;

    for (var i=0;i<10;i++) // Let's change the background color 10 times just for testing purposes
    {
        setTimeout(function(){ body.style.backgroundColor = "red"}, time);
        time += 100;
        setTimeout(function(){ body.style.backgroundColor = "darkGreen"}, time);
        time += 100;
        setTimeout(function(){ body.style.backgroundColor = "darkBlue" }, time);
        time += 100;
    }

}

Answer 4

If you want to add some color-changing effects to your webpage, you can achieve it using setTimeout and style.backgroundColor instead of the provided functions color() and wait(). Check out this custom disco function I created:

function disco(){

    var body = document.getElementById("body");
    var time = 0;

    for (var i=0;i<10;i++) // Let's change the background color 10 times just for testing purposes
    {
        setTimeout(function(){ body.style.backgroundColor = "red"}, time);
        time += 100;
        setTimeout(function(){ body.style.backgroundColor = "darkGreen"}, time);
        time += 100;
        setTimeout(function(){ body.style.backgroundColor = "darkBlue" }, time);
        time += 100;
    }

}

JavaScript execution triggers DOM repaint in Chrome

Answer №1

Answer №2

Similar questions

Launching a Node.js command-line interface to NPM, developed using TypeScript

Encountering an issue with the node.js express server when fetching data

Applying a CSS transition to transform properties excluding rotation effects

Using Jquery to make an Ajax request to a PHP script that retrieves JSON data

A dynamic context menu using jQuery within AJAX-loaded content

When reference variables are utilized before being parsed, what happens?

retrieve the identification number associated with a specific value

Code has been loaded successfully for react-loadable Chunks, however it has not been

Navigate through a variable amount of choices in a JSON array

Is it possible to create a return using messageEmbed in Discord?

AngularJS redirection not fully functional

Express: router.route continues processing without sending the request

In need of changing the date format post splitting

Steps to include a title next to a progress bar:

Using Regex with JavaScript while ignoring letter case

What is the reason for the incompatibility between Bootstrap and Vanilla JavaScript?

Transforming the Unix timestamp prior to transmission via JSON

What is the solution for incorporating multiple elements in knockout's applyBindingsToNode function?

What is the best way to align row elements in Bootstrap?

Unable to resolve the issue with mongoose's model overwrite error