JavaScript - How display text from an array into a div with a 2 second delay-CodePudding

Still pretty new to this so forgive me something is not correct. I have an array with different strings of text, and I want to list each string in an html div with a 2 second delay between each line of text. I figured out how to display the whole array to the div element in html. However, I am having trouble trying to wrapping my head around how to add the 2 second delay affect. Any help would be greatly appreciated.

JS file -

var arrText = [
  "display after 2 seconds", "display after 4 seconds", "display after 6 seconds", "display after 8 seconds",
];
var html='';
for (var i=1; i < arrText.length; i  ) {
    html ='<div>' arrText[i] '</div>';
}
document.getElementById('text-list').innerHTML = html;

html file-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>delay test</title>
</head>
<body>
     <div>
       <div id="text-list" ></div>
     </div>
    <script src="textScript.js"></script>
</body>
</html>

CodePudding user response：

To add a delay between each line of text in your array, you can use the setTimeout function to schedule each line of text to be added to the #text-list element after a certain amount of time. This function takes a callback function and a delay in milliseconds as arguments, and it will call the callback function after the specified delay.

For example, you could modify your code to use setTimeout like this:

var arrText = [
  "display after 2 seconds", "display after 4 seconds", "display after 6 seconds", "display after 8 seconds",
];

// Loop through the array of text and schedule each line to be added to the #text-list element
// with a 2 second delay between each line
for (var i = 0; i < arrText.length; i  ) {
  setTimeout(function(line) {
    var div = document.createElement('div');
    div.innerHTML = line;
    document.getElementById('text-list').appendChild(div);
  }, i * 2000, arrText[i]);
}

This code will loop through the array of text and schedule each line of text to be added to the #text-list element after a 2 second delay. The callback function will create a element, set its inner HTML to the current line of text, and append it to the #text-list element.

Note that the delay is calculated based on the current index of the array. So, the first line of text will be added after 0 seconds, the second line of text will be added after 2 seconds, the third line of text will be added after 4 seconds, and so on. This means that each line of text will be added 2 seconds after the previous line.

You can also use the setInterval function to add a line of text to the #text-list element every 2 seconds. This function takes a callback function and a delay in milliseconds as arguments, and it will call the callback function repeatedly at the specified interval.

For example, you could modify your code to use setInterval like this:

var arrText = [
  "display after 2 seconds", "display after 4 seconds", "display after 6 seconds", "display after 8 seconds",
];

// Create an index variable to track the current line of text
var index = 0;

// Use setInterval to add a line of text to the #text-list element every 2 seconds
var interval = setInterval(function() {
  // If all lines of text have been added, clear the interval
  if (index >= arrText.length) {
    clearInterval(interval);
    return;
  }

  var div = document.createElement('div');
  div.innerHTML = arrText[index];
  document.getElementById('text-list').appendChild(div);
  index  ;
}, 2000);

This code uses setInterval to call a callback function every 2 seconds. The callback function will create a element, set its inner HTML to the current line of text, and append it to the #text-list element. The code also uses an index variable to keep track of the current line of text, and it will clear the interval when all lines of text have been added to the #text-list element.

CodePudding user response：

It's pretty forward. After you create your string array.

var arrText = ["display after 2 seconds", "display after 4 seconds", "display after 6 seconds", "display after 8 seconds"];

Use setInterval function to execute the code every 2000ms.
(Check console for results)

var i = 0;
var interval = setInterval(function() {
  if (i < arrText.length) {
    var div = document.createElement('div');
    div.innerHTML = arrText[i];
    document.body.appendChild(div);
    console.log(div)
    i  ;
  } else {
    clearInterval(interval);
  }
}, 2000);

Now, whatever gets inserted to your string array will be printed out after 2 seconds wrapped in an html <div> blocks.