javascriptでsetIntervalの大実験 めちゃめちゃ詳しいです

～javascriptでsetIntervalの大実験～

いきなりボンってでるより一文字また数文字ずつ流れるように出てきたらおしゃれですよね！

ってことで今回はなめらかに文字を表示できるようにしていきたいと思います。

今回はsetIntervalの大実験です。たぶんどこよりも詳しく書いています。

レベル1 メニューを開くボタンの作成

メニューを開く

実際の記述はこんな感じです。

<div class="javawaku" id="menu">メニューを開く</div>

クリックしてみて下さい。実際にプログラムが動きます

レベル2 ボタンを押した後に出る枠の作成

メニューを開くをクリックした後に出てくるものを作ります。

オマール海老のカルパッチョマンダリンと根セロリのカリソン仕立て

黒トリュフとトピナンブールの軽やかなソース

親子丼

うどん

実際の記述はこんな感じです

<div class="waku3" id="itiran">
<li>オマール海老のカルパッチョマンダリンと根セロリのカリソン仕立て</li>
<li>黒トリュフとトピナンブールの軽やかなソース</li>
<li>親子丼</li>
<li>うどん</li>
</div>

レベル3 メニューとメニュー一覧の枠の要素を取得

要素の取得はdocument.getElementById('id');で取得します。

var menu=document.getElementById('menu');
var itiran=document.getElementById('itiran');

レベル4 メニュー一覧のテキストを取得して変数に入れる

テキストを取得するには要素.textContentを使います。

var menuitiran=itiran.textContent;

これでmenuitiranにメニュー一覧のテキストが全部入ってます

レベル5 これを一文字ずつ配列に入れる

一文字ずつ配列に入れるにはテキストが入ってる変数.split('');を使います。

var menusplit=menuitiran.split('');

レベル6 配列の要素の数（文字数)を取得します

配列の要素の数を取得するには配列.lengthを使います。

var menulength=menusplit.length;

これでmenulengthに文字数が入っています

レベル7 一度メニュー一覧のテキストを空白にする

itiran.textContent="";

レベル8 一文字ずつメニュー一覧に入れる

<div class="waku3" id="itiran">この中一文字ずつ入る</div>イメージです。

menusplit[0]にはオ,menusplit[1]にはマ,menusplit[2]にはル...といった感じで入っているのでこれを順番にテキストに入れていきます。 まず配列の要素の数を0にしてmenusplit[0]に入ってる"オ”から順番に一文字ずつ要素の数を一つずつ増やすことで入れていきます。

新たに配列の長さをvar length=0と定義することで後にmenulengthが使えます。

var length=0;
itiran.textContent += menusplit[length];
length++;

追加でテキストを入れる場合は要素.textContent+=を使います

レベル9 これを時間で制御します。

setIntervalというコマンドを使うと例えばsetInterval(処理内容.1000)で時間が1000ミリ秒（１秒)経つごとに処理内容が繰り返し実行できます。

function()～の代わりに=>を使うとより簡単に書くことができます。

またsetIntervalの処理自体を変数Intervalに入れておくことで処理を止める時に便利です

 var Interval = setInterval(() => {
//処理内容
}.50); //50は50ミリ秒

レベル10 もし配列の長さが最大になったらプログラムをストップさせる

配列の長さはmenulengthに入ってるのでそれを使います。

処理を止めるにはclearIntervalを使います。

        if ( length== menulength) {
            clearInterval(interval);
            return false;
        }

レベル11 レベル8～レベル10をまとめる

レベル8～レベル10をまとめると次のようになります。

var length=0;
 var Interval = setInterval(() => {
        if ( length== menulength) {
            clearInterval(interval);
            return false;
        }
itiran.textContent += menusplit[length];
length++;
}.50); 

レベル12 メニューを開くをクリックすると作動するようにする

何かをクリックしてイベントを起こす場合は要素.addEventListener('click', function(){を使います。

menu.addEventListener('click', function(){
処理内容(レベル11の内容全部)
});

となります。

レベル13 プログラムを全てつなげる

プログラムを全てつなげると次のようになります。

menu=document.getElementById('menu');
var itiran=document.getElementById('itiran');

var menuitiran=itiran.textContent;

var menusplit=menuitiran.split('');
var menulength=menusplit.length;

itiran.textContent="";
menu.addEventListener('click', function(){
var length=0;
 var Interval = setInterval(() => {
        if ( length== menulength) {
            clearInterval(interval);
            return false;
        }
itiran.textContent += menusplit[length];
length++;
}.50); 
});

レベル14 注意点 for文の中にsetTimeout,setIntervalを入れて繰り返そうとしても無駄

for文の中でsetTimeoutを使って困っている方がいると思いますがまずやめた方がいいです

無駄です。for文の実行が終わってからようやくsetTimeoutが実行されるので笑。

setTimeoutやsetIntervalを繰り返し使う場合は上記の技が一番有効です