Animasi mengetik jquery

<html>
<head>
    <title></title>
    <style type="text/css">
        #output, #cursor{
            font-size: 100px;
            text-shadow: 0 0 8px #FF0000, 0 0 50px #0000FF;
        }
        #output{
            color: #fff;
        }
        #cursor{
            color: #a00;
        }
    </style>
</head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- <script type="text/javascript" src="jquery.min.js"></script> -->

<body>
<span id="output"></span><span id="cursor">|</span>

<script type="text/javascript">

    $(document).ready(function(){

    /* fungsi untuk membuat character pipe kedip2*/
    setInterval(function(){
        $('#cursor').fadeToggle();
    },100);

    //===============================//
    // Animasi Mengetik Dengan Typo //
    //=============================//

        /* Text yang akan dimunculkan */
        var text  = ["Clavin June", "Jonathan Ramlie", "Vincent Colin", "Billy Purnama", "Gregory Sykes", "Yip Man"];

        /* index per kata */
        var index = 0;

        /* index per array */
        var arr   = -1;

        /* flag mengecheck apakah dia harus dihapus */
        var clear = true;

        /* flag mengecheck apakah dia melakukan typo */
        var typo  = false;

        /* div target tulisan yang akan diketik */
        var out   = $('#output');

        /* fungsi mengetik mulai dari sini */
        setInterval(function(){
            /* jika tidak typo (false), mengetik seperti biasa*/
            if( !typo ){
                /*jika hapus (true), menghapus tulisan sampai habis*/
                if( clear ){
                    out.text(out.text().slice(0,out.text().length-1));
                    if( out.text().length == 0 ){
                        index = 0;
                        arr++;
                        clear = !clear;
                        if( arr == text.length )
                            arr = 0;
                    }
                //jika index < panjang katanya, dia mengetik
                }else if( index < text[arr].length ){
                    /*chance typo 50%*/
                    if( Math.floor(Math.random()*2) == 1 ){
                        /*typo yg akan diketik 50% huruf besar 50% huruf kecil*/
                        out.append((Math.floor(Math.random()*2) == 1) ? String.fromCharCode(Math.floor(Math.random()*26+97)) : String.fromCharCode(Math.floor(Math.random()*26+65)));
                        /*mengubah status typo menjadi true, agar masuk ke else paling bawah*/
                        typo = !typo;
                    /*change tidak typo 50%, menulis seperti biasa*/
                    }else{
                        out.append(text[arr][index]);
                        index++;
                    }
                /* jika index == panjang kata artinya kata tersebut sudah selesai
                   mengubah flag hapus menjadi true, agar masuk mode menghapus
                */
                }else
                    clear = !clear;
            /*Jika typo (true) dia menghapus 1 character, lalu flag typo menjadi false*/
            }else{
                out.text(out.text().slice(0,out.text().length-1));
                typo = !typo;
            }
        /*mengetik 75ms/huruf*/
        },75);


    //===================//
    // Animasi Mengetik //
    //=================//
        // var text  = "Clavianus Juneardo";
        // var index = 0;
        // var out   = $('#output');

        // /* ketik dimasukan kedalam variable agar bisa dihentikan */
        // var ketik =  setInterval(function(){

        //  /* menambahkan 1 huruf ke target */
        //  out.append(text[index]);

        //  /*index bertambah*/
        //  index++;

        //  /*jika semua huruf tekah terketik*/
        //  if( index == text.length )

        //      /*hentikan fungsi interval*/
        //      clearInterval(ketik);

        // /* mengetik 75ms/huruf */
        // },75);

    //==============================//
    // Animasi Mengetik & menghapus//
    //============================//
        // var text  = "Clavianus Juneardo";
        // var index = 0;
        // var out   = $('#output');

        // /* flag yang menandakan kapan harus menghapus */
        // var clear = false;

        // setInterval(function(){
        //  /* jika hapus (true) */
        //  if( clear ){
        //      /* hapus kata perhuruf */
        //      out.text(out.text().slice(0,out.text().length-1));
        //      if( out.text().length == 0 ){
        //          index = 0;
        //          clear = !clear;
        //      }

        //  /* jika tidak hapus(false) */
        //  }else{
        //      /*ketik perhuruf*/
        //      out.append(text[index]);
        //      index++;

        //      /*jika emua huruf sudah diketik, masuk mode hapus*/
        //      if( index == text.length ){
        //          clear = !clear;
        //      }
        //  }

        // /* mengetik 75ms/huruf */
        // },75);

    //==============================//
    // Animasi Mengetik array & menghapus//
    //============================//
        // var text  = ["Clavianus Juneardo", "Clavin June", "CV17-1"];
        // var index = 0;
        // var arr   = -1;
        // var out   = $('#output');

        // /* flag yang menandakan kapan harus menghapus */
        // var clear = false;

        // setInterval(function(){
        //  /* jika hapus (true) */
        //  if( !clear ){

        //      /* hapus kata perhuruf */
        //      out.text(out.text().slice(0,out.text().length-1));

        //      /*jika sudah tidak ada lagi kata yg harus di hapus*/
        //      if( out.text().length == 0 ){
        //          /*kembalikan index ke 0*/
        //          index = 0;

        //          /* tambah index agar hasil ketikan berbeda*/
        //          arr++;

        //          /*jika sudah sampai array terakhir*/
        //          if( arr == text.length ){
        //              /*kembalikan ke array ke 0*/
        //              arr = 0;
        //          }
        //          clear = !clear;
        //      }

        //  /* jika tidak hapus(false) */
        //  }else{
        //      /*ketik perhuruf*/
        //      out.append(text[arr][index]);
        //      index++;
        //      /*jika emua huruf sudah diketik, masuk mode hapus*/
        //      if( index == text[arr].length ){
        //          clear = !clear;
        //      }
        //  }

        // /* mengetik 75ms/huruf */
        // },75);
    });




</script>
</body>
</html>