New line in array and clear page

Question

I have a project that prints sentences from a large array to the screen.

Using this Javascript: Loop through Array with Delay I was able to get it working. However, there are two things that I would like to achieve. Although I can print elements line by line, I would like to incorporate line spaces at some points so for example :

var splittedText = [“This is the first paragraph ", “and it tells a story.”, ***line space empty here**, “this is the second paragraph “, “and it tells another story.”];

should print to screen:

This is the first paragraph
and it tells a story

This is the second paragraph 
and it tells another story

Second question:

I would like for the text to clear off the lines off the screen after x amount of lines so in the case above after 4 lines (including space) it would clear and just print

and it tells another story

However, if there were more lines it would continue printing

so lines 1-4 will be cleared 5 will appear, then 6, 7, 8 5,6,7 will be cleared then 8, 9 ,10, 11 and so on

Essentially it should be similar to a scrolling effect

When final line is reached it will reiterate and start process again. Full code here:

</style>
<div id="o"></div>
<script>


var body = document.body;
var splittedText = [“This is the first paragraph ", “and it tells a story.”, “line space empty here “, “this is the second paragraph “, “and it tells another story.”];

loopThroughArray(splittedText, function (arrayElement, loopTime) {
    body.innerHTML += arrayElement + "<br/>";
}, 2000);

function loopThroughArray(array, callback, interval) {
    var newLoopTimer = new LoopTimer(function (time) {
        var element = array.shift();
        callback(element, time - start);
        array.push(element);
    }, interval);

    var start = newLoopTimer.start();
};

// Timer 
function LoopTimer(render, interval) {
    var timeout;
    var lastTime;

    this.start = startLoop;
    this.stop = stopLoop;

    // Start Loop
    function startLoop() {
        timeout = setTimeout(createLoop, 0);
        lastTime = Date.now();
        return lastTime;
    }

    // Stop Loop
    function stopLoop() {
        clearTimeout(timeout);
        return lastTime;
    }

    // The actual loop
    function createLoop() {
        var thisTime = Date.now();
        var loopTime = thisTime - lastTime;
        var delay = Math.max(interval - loopTime, 0);
        timeout = setTimeout(createLoop, delay);
        lastTime = thisTime + delay;
        render(thisTime);
    }
}

  </script>

dbramwell · Accepted Answer · 2019-08-07T16:36:31.333

1

This all seems a little over engineered. I'd do something like the below:

var body = document.body;
var splittedText = ["This is the first paragraph", "and it tells a story.", "", "this is the second paragraph", "and it tells another story."];

var clone = [...splittedText]

var content = []

var intervalId = setInterval(function() {

  if (content.length >= 4) content = []

  var element = clone.shift();
  content.push(element + "<br/>");
  
  if (clone[0] == "") {
    content.push("<br/>");
    clone.shift();
  }
  
  body.innerHTML = content.join('')
  
  if (clone.length === 0) {
    clone = [...splittedText]
    content = []
  }
  
}, 2000)

edited Aug 07 '19 at 16:36

answered Aug 07 '19 at 16:17

dbramwell

1,298
6
11

Thanks dbramwell, that solves the break problem but your code has removed the loop function. Also, any suggestions on clearing page after X lines would be great. – heroZero Aug 07 '19 at 16:25
1

Updated for clearing the lines. Do you want the text to loop and loop forever? When the final line shows, do you want the page to clear again before the first line shows again? – dbramwell Aug 07 '19 at 16:29
1

No worries, made another change. Loops forever and clears the screen either after four lines or when all lines have been shown, then starts again. – dbramwell Aug 07 '19 at 16:39
Much appreciated! – heroZero Aug 07 '19 at 16:42

score -1 · Answer 2 · answered Aug 07 '19 at 15:59

-1

you can use \n\n . to get 2 new lines in text.

answered Aug 07 '19 at 15:59

Johnathon Hardy

170
5

Not sure that will work as it would have to go within array? – heroZero Aug 07 '19 at 16:14

New line in array and clear page

2 Answers2