setIntervalとsetTimeoutの間のコンフリクト

Question

教育目的のために、私はJavaScriptでコードの次の部分を書きました。目標は、テレタイプのマシンをシミュレートすることです。コンテンツが書き込まれた後、マシンは一時停止してから再開します。

var str = 'Some text'; 
strArray = str.split(""); 
window.onload = function teleType() { 
    var ctrl = 0; 
    var wrapId = document.getElementById("wrap"); 
    var type = setInterval(function() { 
    wrapId.innerHTML += strArray[ctrl]; 
    if (ctrl == strArray.length) { 
     wrapId.innerHTML = ""; 
     ctrl = 0; 
     clearInterval(type); 
    } 
    ctrl++; 
    }, 2000); 
    setTimeout(teleType, 3000); 
} 

しかし、これらの間隔（mlliseconds）を持つマシンは、奇妙な振る舞いを持ち始めます。文字（インデックス）をジャンプしたり、文字列（配列）の終わりに達することなく先頭から始まります。 setIntervalとsetTimeoutの間に何が起こっていますか？

Answer 1

setIntervalの後にsetTimeout immediatellyを呼び出します。
その結果、間隔が完了する前にteleTypeがトリガーされます。

あなたの間隔の終わりに、あなたのsetTimeoutを移動することができます。

var str = 'Some text'; 
 
strArray = str.split(""); 
 
window.onload = function teleType() { 
 
    var ctrl = 0; 
 
    var wrapId = document.getElementById("wrap"); 
 
    var type = setInterval(function() { 
 
    wrapId.innerHTML += strArray[ctrl]; 
 
    if (ctrl == strArray.length) { 
 
     wrapId.innerHTML = ""; 
 
     ctrl = 0; 
 
     clearInterval(type); 
 
     setTimeout(teleType, 300); 
 
    } 
 
    ctrl++; 
 
    }, 200); 
 
}

<div id="wrap"></div>

さて、teleType機能は、間隔を実行し、それがテキストを書く完了したときには、HTMLコンテンツをクリアしにブラウザに指示します2分後にもう一度teleTypeを実行してください。

ちなみにctrlはローカルであり、とにかくリセットされるため、0に設定する必要はありません。

Answer 2

コンソールにテキストを出力サンプル関数、

function showTeleText(text, repeat) { 
    var textByChar = text.split(''), 
     intermText = '', 
     textPos = 0; 

    var interval = setInterval(function() { 
     intermText += textByChar[textPos++] 
     console.log(intermText); 

     if (textPos >= textByChar.length) { 
      clearInterval(interval); 

      if (repeat) { 
       setTimeout(function() { 
        showTeleText(text, repeat); 
       }, 2000); 
      } 
     } 
    }, 500); 
} 

window.loadコールshowTeleText('Some text!', true/false)上

window.load = function() { 
    showTeleText('Some text!', true); 
}