CODEWITHSUNDEEP
javascriptsettimeoutdelay
Aditya Raut
Aditya Raut

Reputation: 1

How do I print each character of a string but with 1s of delay in JavaScript?

I want to print "Hello World" on the screen but its each character one by one with 1 second delay. I've used setInterval() function but its not working. Why?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
</head>
<body>
    <script>
        function type(){
            var text = "Hello World!";
            var i;
            var o = "";
            for(i = 0;i < text.length;i++){
            o += text[i]
            document.write(o[i])
            
            }
        }

    var exe = setInterval(type(), 1000);
    </script>
</body>
</html>

Upvotes: 0

Views: 2826

Answers (9)

Amardeep Bhowmick
Amardeep Bhowmick

Reputation: 16908

We can use the concept of a closure and maintain the index of the character to be printed as a closure variable.

Each time the interval callback function is executed, the index is incremented and the inner function takes the current value of the index from the lexical scope.

Then once the length of the text is equal to the index, the interval is cleared:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Test</title>
</head>

<body>
  <script>
    function type(text, idx) {
      document.write(text[idx]);
    }
    function start() {
      //The index to keep track of and increment from the timer
      let idx = 0;

      //The text to iterate
      const text = "Hello World!";

      //Set up the interval with a callback and form a closure
      const id = setInterval(() => {

       //Refers to the text and idx from the lexical scope
        type(text, idx++);

        //Once the index has reached the length of the text
        if (idx === text.length) {

          //clear the interval id
          clearInterval(id);

        }
      }, 1000);
    }

    //Invoke the main function
    start();
  </script>
</body>

</html>

Upvotes: 0

deepak
deepak

Reputation: 1375

 var interval = null
 function type(){
            var text = "Hello World!";
            var i = 0;
            interval = setInterval( () => {
             if( i === text.length -1) {
               clearInterval(interval);
               
               }
               document.write(text[i]);
             console.log(text[i++]);
             
             }, 1000)    
  }
  
  type()

Upvotes: 0

Kyle Lambert
Kyle Lambert

Reputation: 389

Something like this perhaps?

const word = "Hello World";

function printWord(str) {
  if (typeof str === "string") {
    let curIndex = 0;
    const interval = setInterval(() => {
      if (curIndex < str.length) {
        console.log(str[curIndex]);
        curIndex++;
      } else {
        clearInterval(interval);
      }
    }, 1000);
  }
}

printWord(word);

Upvotes: 0

Harshita
Harshita

Reputation: 85

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
</head>
<body>
  
</body>
  <script>
    var i=0;
     var text = "Hello World!";
       

    var exe = setInterval(function (){if (i<text.length)
                 document.write(text[i])
            
      
            i++;}, 1000);
    </script>
</html>

Upvotes: 0

Tigran Abrahamyan
Tigran Abrahamyan

Reputation: 776

We simply split our string into arrays and, when inserted into the page, delete the first element.

When there are no elements left in our array, we stop the timer.

let str = 'Hello world'.split('');

const interval = setInterval(() => {
  document.write(str[0]);
  str = str.slice(1);
  
  if (!str.length) {
    clearInterval(interval);
  }
}, 1000);

Upvotes: 2

syarul
syarul

Reputation: 2187

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
</head>
<body>
    <script>
        var i = 0
        var o = "";
        var text = "Hello World!";
        function type(){
            if(i < text.length){
                o += text[i]
                document.write(o[i])
                i++
                setTimeout(type, 1000)
            }
        }

        setTimeout(type, 1000)
    </script>
</body>
</html>

Upvotes: 0

Hao Wu
Hao Wu

Reputation: 20734

There're so many mistakes in your code, I don't know where to start...

Sorry to put it this way, but here's a cleaner version follows your approach, mind the comments:

const text = "Hello World!";

// the timer reference
let timer;

// the current index
let i = 0;

// you don't need a for loop in setInterval, the function itself is aleady called in iterations, just treat it as a loop iteration.
function type() {

  // print the current charater with current index
  document.write(text[i]);
  
  // increase the index
  i++;
  
  // if the index reaches the maximum text length, cease the timer
  if(i >= text.length) 
    clearInterval(timer);
}

// pass in function, instead of calling it
timer = setInterval(type, 1000);

Upvotes: 2

Sarun UK
Sarun UK

Reputation: 6746

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
</head>
<body>
    <script>
        function type(){
            var text = "Hello World!";
            var o = "";
            for(let i = 0;i < text.length;i++){
            o += text[i];
            setTimeout(()=> document.write(o[i]), i*1000);
          }
        }
    type();
    </script>
</body>
</html>

Upvotes: 0

Yogen Darji
Yogen Darji

Reputation: 3300

I've made few changes with your logic.

type() function will only do char print.

intialize starting position with 0 and text.

when i is same as text.length clearInterval

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Test</title>
</head>

<body>
  <script>
    var text = "Hello World!";
    var i = 0;
    var o = "";

    function type() {
      o += text[i];
      document.write(o[i]);
      i++;
      if (i == text.length) {
        clearInterval(interval);
      }
    }
    var interval = window.setInterval(type, 1000);
  </script>
</body>

</html>

Upvotes: 1

Related Questions