Integrate individual characters into the div element sequentially using javascript, rather than all at once

Question

Integrate individual characters into the div element sequentially using javascript, rather than all at once

After a few years, I decided to dive back into experimenting with JavaScript. I've encountered a situation where I'm trying to add the character "X" to a div element one at a time, instead of all at once. Currently, the DOM seems to be adding them in clusters, leaving my page blank and then suddenly displaying everything together. My goal is to have the "X's" show up individually with a delay of 2 seconds between each addition.

<div id="here"></div>

<script>

function wait(ms) {
    var d = new Date();
    var d2 = null;

    do {
        d2 = new Date();
    }
    while (d2 - d < ms);
}

function runTest() {
    var cnt = 0;

    while (cnt < 50) {
        var x = document.getElementById("here");
        x.innerHTML += "X + ";
        wait(2000);
        cnt++;
    }
}

</script>

javascript dom

Answer 1

Answer №1

It seems that the function wait() is not functioning as expected. The current implementation consists of a loop that consumes resources for a specified duration. To illustrate this issue, consider the following example where two logs are displayed (one before and one after wait()), but only when the function stops consuming resources:

function wait(ms)
{
    var d = new Date();
    var d2 = null;

    do {
        d2 = new Date();
    }
    while (d2 - d < ms);
}

console.log("Before wait() is called");
wait(5000);
console.log("After wait() is done");

.as-console {background-color:black !important; color:lime;}

If you are looking for a more efficient approach, consider using setInterval().

Example with `setInterval()`:

var cnt = 0;
var x = document.getElementById("here");
var ival = setInterval(addX, 2000);

function addX()
{
    if (++cnt > 10)
    {
        clearInterval(ival);
        console.log("Finished!");
        return;
    }

    x.innerHTML += "X + ";
}

.as-console {background-color:black !important; color:lime;}

<div id="here"></div>

To stop the repeated action, utilize clearInterval().

Alternatively, you can achieve your goal by combining a Promise() with setTimeout() to create a modified version of your wait() method. See the example below:

Example with `Promise`:

function wait(ms)
{
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function runTest()
{
    var cnt = 0;

    while (cnt < 10)
    {
       var x = document.getElementById("here");
       x.innerHTML += "X + ";
       await wait(2000);
       cnt++;
    }
}

runTest();

<div id="here"></div>

Answer 2

It seems that the function wait() is not functioning as expected. The current implementation consists of a loop that consumes resources for a specified duration. To illustrate this issue, consider the following example where two logs are displayed (one before and one after wait()), but only when the function stops consuming resources:

function wait(ms)
{
    var d = new Date();
    var d2 = null;

    do {
        d2 = new Date();
    }
    while (d2 - d < ms);
}

console.log("Before wait() is called");
wait(5000);
console.log("After wait() is done");

.as-console {background-color:black !important; color:lime;}

If you are looking for a more efficient approach, consider using setInterval().

Example with `setInterval()`:

var cnt = 0;
var x = document.getElementById("here");
var ival = setInterval(addX, 2000);

function addX()
{
    if (++cnt > 10)
    {
        clearInterval(ival);
        console.log("Finished!");
        return;
    }

    x.innerHTML += "X + ";
}

.as-console {background-color:black !important; color:lime;}

<div id="here"></div>

To stop the repeated action, utilize clearInterval().

Alternatively, you can achieve your goal by combining a Promise() with setTimeout() to create a modified version of your wait() method. See the example below:

Example with `Promise`:

function wait(ms)
{
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function runTest()
{
    var cnt = 0;

    while (cnt < 10)
    {
       var x = document.getElementById("here");
       x.innerHTML += "X + ";
       await wait(2000);
       cnt++;
    }
}

runTest();

<div id="here"></div>

Answer 3

Answer №2

To improve performance, it's recommended to utilize setInterval() instead of wait in JavaScript. Due to the non-threaded nature of Javascript, using wait will halt the entire execution each time it is encountered. The usage of wait() is typically rare and setting an interval to run every X seconds is usually more appropriate.

For example, the code below demonstrates a function that runs every 2 seconds. When the count reaches 50, a message is sent to the DOM instructing the function to stop running.

function divBunches() {
  var elem = document.getElementById("here"); 
  var id = setInterval(addDiv, 2000);
  var count = 0;
  function addDiv() {
    if (count == 50) {
      clearInterval(id);
    } else {
      elem.innerHTML += "X + ";
    }
    count++;
  }
}

Answer 4

To improve performance, it's recommended to utilize setInterval() instead of wait in JavaScript. Due to the non-threaded nature of Javascript, using wait will halt the entire execution each time it is encountered. The usage of wait() is typically rare and setting an interval to run every X seconds is usually more appropriate.

For example, the code below demonstrates a function that runs every 2 seconds. When the count reaches 50, a message is sent to the DOM instructing the function to stop running.

function divBunches() {
  var elem = document.getElementById("here"); 
  var id = setInterval(addDiv, 2000);
  var count = 0;
  function addDiv() {
    if (count == 50) {
      clearInterval(id);
    } else {
      elem.innerHTML += "X + ";
    }
    count++;
  }
}

Integrate individual characters into the div element sequentially using javascript, rather than all at once

Answer №1

Example with `setInterval()`:

Example with `Promise`:

Answer №2

Similar questions

Updating NavBar text dynamically based on user login status in React.JS

What is the process for accessing browser API calls through Protractor?

Leveraging several useState hooks

The AJAX load event listener triggers prior to receiving a response from the server

Customizing Material UI tooltip styles with inline CSS formatting

Include a predetermined parameter for the upcoming callback

Access the properties of a JSON object without specifying a key

Render multiple checkboxes with values from an array of objects passed as a prop to a child component using a v

Struggling with developing a straightforward application with Angular-Material

"Creating varying lengths of time with useSpring: A Step-by-Step Guide

What is the best way to extract and retrieve the most recent data from an XmlHttpRequest?

Encountering an issue with React Router v6 where calling `history.push('/')` results in an error of "undefined (reading 'pathname')" - the URL changes, but the page remains unchanged

Update dynamically generated CSS automatically

Sending files to an FTP server using Vue.js

What should I do to resolve the error message TypeError: _components_firebase_Firebase__WEBPACK_IMPORTED_MODULE_2__.default.auth is not a valid function?

Incorporating External JavaScript and CSS specifically for a single component

JS backbone require global models in js

How to verify changes in session variable using PHP and AJAX

Retrieving decimal value from a given string

Capturing the dynamic server response with nested JSON structures

Integrate individual characters into the div element sequentially using javascript, rather than all at once

Answer №1

Example with setInterval():

Example with Promise:

Answer №2

Similar questions

Updating NavBar text dynamically based on user login status in React.JS

What is the process for accessing browser API calls through Protractor?

Leveraging several useState hooks

The AJAX load event listener triggers prior to receiving a response from the server

Customizing Material UI tooltip styles with inline CSS formatting

Include a predetermined parameter for the upcoming callback

Access the properties of a JSON object without specifying a key

Render multiple checkboxes with values from an array of objects passed as a prop to a child component using a v

Struggling with developing a straightforward application with Angular-Material

"Creating varying lengths of time with useSpring: A Step-by-Step Guide

What is the best way to extract and retrieve the most recent data from an XmlHttpRequest?

Encountering an issue with React Router v6 where calling `history.push('/')` results in an error of "undefined (reading 'pathname')" - the URL changes, but the page remains unchanged

Update dynamically generated CSS automatically

Sending files to an FTP server using Vue.js

What should I do to resolve the error message TypeError: _components_firebase_Firebase__WEBPACK_IMPORTED_MODULE_2__.default.auth is not a valid function?

Incorporating External JavaScript and CSS specifically for a single component

JS backbone require global models in js

How to verify changes in session variable using PHP and AJAX

Retrieving decimal value from a given string

Capturing the dynamic server response with nested JSON structures

Example with `setInterval()`:

Example with `Promise`: