Trouble with using and incrementing array item values in an interval

Question

Im attempting to replicate a typing effect that cycles through an array and 'types out' each string. I've managed to get the effect working well, however I've found that if the current tagline is shorter than the next in the array it will go off its longer char length and will output the remaining missing characters from the next item.

I've probably explained poorly but if anyone feels like testing this out you'll see exactly what I mean.

I know that the issue is to do with where the tagCount is being incremented and where is is being used, but It's just one of those things I've been staring at for an hour and got nowhere.

var tagline = ['This is a tagline', 'Test string', 'Another test string', 'test'];
var tagCount = 0;
var output = document.getElementById('output');
var i = 0;
var countup = true;
var delayBool = true;

var interval = setInterval(function(){
    if ((i < tagline[tagCount].length) && (countup == true)){
    output.innerHTML += tagline[tagCount].charAt(i);
    i++; }
  else if((i > 0) && (countup == false)){
    output.innerHTML = output.innerHTML.substring(0, output.innerHTML.length - 1);
    i--; }

  else if((i == 0) && (countup == false)){
    countup = true; }
  else if((i == tagline[tagCount].length) && (delayBool == true)){
        delay();
    delayBool = false;
  }
  console.log(tagCount)
}, 50);


function delay(){
    if (tagCount < tagline.length-1){
    tagCount++; }
  else{
    tagCount = 0; }
    var delayInterval = setInterval(function(){
        countup = false;
    delayBool = true;
    clearInterval(delayInterval);
  }, 2000);
}

Heres the tiny bit of HTML

<h1 id=output></h1>

CAllen · Accepted Answer · 2018-12-17 14:56:01Z

1

What you have is good but you can use some of javascript's function to help you achieve what you need.

Whenever dealing with arrays or string characters, etc. It is best to use loops and lengths so you don't run into problems with counters as you have above.

Below I have outline and comments to help you understand. Hope this helps and good job.

<html>
    <body>
        <h1 id='output'></h1>

        <script>
            // creating our own sleep function
            function sleep (ms) {
                return new Promise(resolve => setTimeout(resolve, ms));
            }

            // use async to wait instead of using intervals
            async function print_words () {
                var tagline = ['This is a tagline', 'Test string', 'Another test string', 'test'];
                var output = document.getElementById('output');

                // tagline is an array so you can simplify it using a loop that way you dont have to woory about counters
                for (counter in tagline) {
                    var line    = tagline [counter]; // the lines in the list

                    // this will print the right characters and because it is a 
                    // loop the couter will start at 0 for every tagline so you won't
                    // have that problem again 

                    // use another counter to go through character by charavter
                    for (var pos = 0; pos < line.length; pos++) {
                        var character   = line[pos];
                        output.innerHTML += character;
                        await sleep (50); // wait for 50 ms
                    }

                    await sleep (1000); // how long to wait to remove

                    // now we move in revers but this way we only use one line of code to display the erasing effect
                    for (var rev = output.innerHTML.length - 1; rev >= 0; rev--) {
                        output.innerHTML = output.innerHTML.slice(0, rev);
                        await sleep (50); // wait for 50 ms
                    }

                    await sleep (2000); // wait for 2 seconds


                    // clear the screen
                    output.innerHTML    = '';
                }
            }

            print_words ();
        </script>
    </body>
</html>

answered Dec 17, 2018 at 14:56

CAllen

8265 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

CAllen Over a year ago

You can also now use a variable in your code to play with the speed of the printing. Also note that I only have it running once. With a few touch up you can make it do more.

Will Law Over a year ago

Your answer is great, thanks for commenting a little bit of a walkthrough.

CAllen Over a year ago

Your welcome and thank you. Keep up the good job. Also It is very good practice to comment on your code. Trust me, it will help you in the future

Will Law Over a year ago

Sorry, I imagine it was a pain to read. I just chucked this together on CodePen and forgot to add any comments in. I'll try to get into the habit a bit more in future

CAllen Over a year ago

no it was quite readable and i understood. I was going to correct your code but I thought it would be better to show u a better way. I can still show you where in your code the error was if you like.

|

Collectives™ on Stack Overflow

Trouble with using and incrementing array item values in an interval

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related