Adding delay to every single item in an array

Question

I am trying to simulate the typing of a name using jquery, here is what I have so far:

var name = "hello there!";
var namesplit = name.split('');     
$(document).ready(function () {
    for (var i = 0; i < namesplit.length; i++) {
        $('.wrapper h1').append(namesplit[i]);
    }
});

Basically, what I want is for each character in "hello there!" to be entered, there be a slight delay, then the next character. Also, this is inserting into an h1 which has a span within it (which contains the character "|"). How could I prevent this from overwriting the span (i.e. it SHOULD be like this: Hello there!| NOT |Hello there!). Thanks!

can you add another span in the h1

Arun P Johny
– Arun P Johny

2014-01-23 00:29:20 +00:00
Commented Jan 23, 2014 at 0:29 — Arun P Johny
– Arun P Johny, Commented Jan 23, 2014 at 0:29
Yes, if I wanted to I could.

user3220348
– user3220348

2014-01-23 00:29:53 +00:00
Commented Jan 23, 2014 at 0:29 — user3220348
– user3220348, Commented Jan 23, 2014 at 0:29

Arun P Johny · Accepted Answer · 2014-01-23 00:30:23Z

2

Add another span in the h1

<div class="wrapper">
     <h1><span></span><span>|</span></h1>
</div>

then

$(document).ready(function () {
    var name = "hello there!";
    var namesplit = name.split('');

    $.each(namesplit, function (i, v) {
        setTimeout(function () {
            $('.wrapper h1 span:first').append(namesplit[i]);
        }, i * 100)
    })
});

Demo: Fiddle

If you are working with a very big string, then it wouldn't be a great idea to create so many times, then try

$(document).ready(function () {
    var name = "hello there!";
    var namesplit = name.split('');

    function print() {
        if (!namesplit.length) {
            return;
        }
        $('.wrapper h1 span:first').append(namesplit.shift());
        setTimeout(print, 100)
    }

    print()
});

Demo: Fiddle

answered Jan 23, 2014 at 0:30

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

Comments

CodeHacker · Accepted Answer · 2014-01-23 00:36:36Z

0

<html>
 <head>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
  <script type='text/javascript'>
    $(function () {

     var name = "hello there!";
     var namesplit = name.split('');
     for (var i = namesplit.length-1; i >=0; i--) {
        $('.wrapper').prepend(namesplit[i]);
     }
   });
  </script>
</head>
<body>
    <h1><span class="wrapper">|</span></h1>
</body>
</html>

answered Jan 23, 2014 at 0:36

CodeHacker

2,1381 gold badge22 silver badges36 bronze badges

1 Comment

CodeHacker Over a year ago

or if you need it outside the span but in the h1 $('h1').prepend(namesplit[i]);

RobG · Accepted Answer · 2014-01-23 01:28:36Z

You can write a single function to do the job, or create a constructor so you can have many such animations in the page simultaneously:

function TypeIt(id, msg, delay) {
  this.el = document.getElementById(id);
  this.msg = msg;
  this.delay = delay;
  this.index = 0;
}

TypeIt.prototype.run = function() {
  var typeit = this;
  this.el.innerHTML = this.msg.substring(0, ++this.index);
  if (this.index < this.msg.length) {
    setTimeout(function(){typeit.run();}, this.delay); 
  }
}

window.onload = function(){
  var typeit = new TypeIt('d0', 'Hello World!', 100);
  typeit.run();
}

If only one instance is required, the above can be refactored using the module pattern or a simple function like:

function typeIt(id, msg, delay, index) {
  index = index || 0;
  document.getElementById(id).innerHTML = msg.substring(0, ++index);
  if (index < msg.length) {
    setTimeout(function(){typeIt(id, msg, delay, index)}, delay);
  }
}

Collectives™ on Stack Overflow

Adding delay to every single item in an array

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related