テキストを1文字ずつ表示する時にリピートしてしまう問題

Question

##制作しているもの
画面内に入ると.fadein_ti h2に.fadeinクラスが追加され、そのテキストが1文字ずつ表示されるものを制作しています。

##つまづいている場所
1文字ずつ表示されたのを確認し、別の場所へスクロールしてからもう一度戻るとアニメーションがリピートされます。
一度追加された.fadeinをremoveClassで削除し試してみましたがダメでした。

##実装したいこと
①画面内に入ると.fadein_ti h2に.fadeinクラスが追加される
②その追加されたテキストが1文字ずつ表示される
③そのページに居る限り一度1文字ずつ表示されたものは、スクロールされても表示されたままで見える

↓現在のコードです。
jsfiddle
https://jsfiddle.net/beap532c/1/

<p>下にスクロール↓</p>
<div id="wrap">
<div class="fadein_ti">
  <h2><span>画面内にはいると</span><br />
  <span>テキストが1文字ずつ表示される</span></h2>
</div>
</div>

$(window).scroll(function() {
  var windowH = $(window).height(),
  scrollY = $(window).scrollTop();
  
  $('.fadein_ti h2').each(function() {
    var elPosition = $(this).offset().top;
    if (scrollY > elPosition - windowH) {
      $(this).addClass("fadein");
        
    //text fadein
      var DELAY_SPEED = 70;//文字が流れる速さ
      var FADE_SPEED = 500;//表示のアニメーション時間
      var str = [];
      
      $('.fadein > span').each(function(i){//セレクタで指定した要素すべて
          $(this).css('opacity','1');//行を不透明にする
          str[i] = $(this).text();//元のテキストをコピーし
          $(this).text('');//テキストを消す
          var no = i;
          var self = this;
          var interval = setInterval(function(){//50ミリ秒毎にチェック
              if(no == 0 || $('.fadein > span').eq(no - 1).children('span:last').css('opacity') == 1){//最初の行または前の行が全文字表示された時
                clearInterval(interval);//チェックを停止
                for (var j = 0; j < str[no].length; j++) {
                    $(self).append('<span>'+str[no].substr(j, 1)+'</span>');//1文字ずつ<span>を付けて
                    $(self).children('span:last').delay(DELAY_SPEED * j).animate({opacity:'1'}, FADE_SPEED);//時間差でフェードインさせる
                }
              }
          }, 50);
      });
    }
  });
});

#wrap{
  margin-top:500px;
}
.fadein span{
    opacity:0;
}

コードを見ていただいて
ここが間違っているからリピートされるのかご指導いただければと思います。
お分かりになられる方、よろしくお願いします。

Answer 1

イベントのトリガーがscrollになっているからですね。
グローバルスコープにフラグ用の変数を用意しておいて分岐かけてはどうでしょうか。

Comments

[satoshickkk]

mts10806様、ご回答ありがとうございます。
なるほど…トリガーがscrollになっていることによって
スクロールがその位置まで来ないとアニメーションが開始されないし
開始されても別の場所へ動くとアニメーションが1からになってしまうのですね。

「グローバルスコープにフラグ用の変数を用意しておいて分岐かけてはどうでしょうか。」
の部分をもう少し詳しくお聞きしたいのですが
詳しい記事などもし把握されていましたら是非教えていただきたいです。

[m.ts10806]

実は回答文最後の「。」はフォークしたコードのリンクになってたりします。

[satoshickkk]

申し訳ございません！全く気づきませんでした。。
わたしが求めていた動きそのもので感激いたしました。
自分の書いたコードとmts10806様のコードを見比べて違う部分をより詳しく調べたいと思います。
ありがとうございます！

[m.ts10806]

あえて気づきにくくしました（１つの”解答”コードなので）
やり方はたくさんあって実現方法は１つではありません。私のやり方はいわば後付けです。今の処理に追加したやり方です。
そもそも組み込み方を見直すやり方もありますので、そのあたりは色々試してみてください。

[satoshickkk]

他の方の回答も見て思いましたが同じ動きをさせるのに
人それぞれで考え方もコードも変わってくることを学びました。
このあたりの分岐でいつもつまづいているのでより勉強したいと思います。
ありがとうございました。

Answer 2

.fadeinを付与する時に違うクラスも付けて、
中断させておくのはどうでしょうか？

if ($('.fadein').hasClass('show')) {
          return;
        }
$(this).addClass("fadein show");

Comments

[satoshickkk]

akihiro3様、ありがとうございます。
「違うクラスも付けて」とありますが
いまfadeinをつけている→「$(this).addClass("fadein");」この部分を
教えていただいたコードに置き換えて中断させる感じでしょうか？

Answer 3

スクロール後fadeinクラスをつけていますが、最初からfadeinをつけておいて
表示が終わった時点でfadeinをはずしてやったらどうでしょう？

Comments

[satoshickkk]

この前に試したのは、yambejp様のおっしゃる最初からfadeinを付けるものでしたが
最初からfadeinを付けておくとスクロールする前にアニメーションが終わってしまっていたので
今回後からクラスを渡すやり方を選択しました。
最初からクラスを渡す記述の場所が間違えているので
スクロールする前にアニメーションが終わってしまうのでしょうか…？
お時間あれば教えていただきたいです。