Javascript automatically change string

Question

Hi im new to javascript and im trying to figure out how to append a string after an allotted amount of time.

After 3 secs append string (How)
After 3 secs append string (are)
After 3 secs append string (you)
After 3 secs append string (?)

Thanks :D

Please heed @SLaks' comment and do not pass a string to setTimeout. It's eval in disguise. — Matt Ball
– Matt Ball, Commented May 4, 2011 at 2:55

Matt Ball · Accepted Answer · 2011-05-04 02:42:11Z

3

Use setTimeout.

var text = 'How are you ?'.split(' '),
    delay = 3000;

function generateCallback(text) {
    return function () {
        alert(text);
    };
}

for (var i=0; i<text.length; i++) {
    setTimeout(generateCallback(text[i]), delay*(i+1));
}

http://jsfiddle.net/mattball/dYBUs/

edited May 4, 2011 at 2:42

answered May 4, 2011 at 2:35

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

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

Comments

aroth · Accepted Answer · 2011-05-04 02:36:43Z

1

<html>
    <head></head>
    <body>
        <span id="mySpan"></span>
    </body>
    <script>
        setTimeout('document.getElementById("mySpan").innerHTML += "How ";', 3000);
        setTimeout('document.getElementById("mySpan").innerHTML += "are ";', 6000);
        setTimeout('document.getElementById("mySpan").innerHTML += "you";', 9000);
        setTimeout('document.getElementById("mySpan").innerHTML += "?";', 12000);
    </script>
</html>

answered May 4, 2011 at 2:36

aroth

54.9k22 gold badges142 silver badges178 bronze badges

2 Comments

SLaks Over a year ago

Do not pass a string to setTimeout.

Matt Ball Over a year ago

Please do not advise passing strings to setTimeout. It's eval in disguise.

RobG · Accepted Answer · 2011-05-04 03:58:38Z

0

As a modification of current answers, a single setInterval call can be used, cancelling it when all words are displayed:

// s is string to display
// interval is the time in milliseconds between adding words
// id is the id or reference to a DOM element to display s in
function staggerDisplay(s, interval, id) {

  var el = typeof id == 'string'? document.getElementById(id) : id;
  var sBits = s.split(' ');
  var numWords = sBits.length;
  var i = 0;
  var intervalRef = setInterval(
    function () {
      if (i < numWords) {
        el.innerHTML += ' ' + sBits[i++];
      } else {
        clearInterval(intervalRef);
      }
    }, interval);
}

answered May 4, 2011 at 3:58

RobG

148k32 gold badges180 silver badges216 bronze badges

Collectives™ on Stack Overflow

Javascript automatically change string

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related