JavaScriptでsetIntervalを一時停止して再開する

Question

JavaScriptのcodility'sホームページでタイピング効果を模倣しようとしています。既にsetInterval（）を使用してタイピングと削除の効果を達成しました 。

ここではそのjsfiddleです：CSSの私の周り私の頭を取得することはできませんどのような

#cursor{ 
    -webkit-animation: 1s blink step-end infinite; 
    -moz-animation: 1s blink step-end infinite; 
    animation: 1s blink step-end infinite; 
} 

@keyframes blink { 
    from, to { 
    opacity:0; 
    } 
    50% { 
    opacity: 1; 
    } 
} 

@-moz-keyframes blink { 
    from, to { 
    opacity:0; 
    } 
    50% { 
    opacity:1; 
    } 
} 

@-webkit-keyframes blink { 
    from, to { 
    opacity:0; 
    } 
    50% { 
    opacity:1; 
    } 
} 

がどのように私でしある https://jsfiddle.net/yzfb8zow/

var span=document.getElementById("content"); 
var strings=["hello world","how r u??"]; 

var index=0; //get string in the strings array 
var chIndex=0; //get char in string 
var type=true; 

setInterval(function(){ 
    if(index===strings.length) 
    index=0; 
    if(type){ 
    typeIt(); 
    } 
    else 
    deleteIt(); 
},200); 

// type the string 
function typeIt(){ 
    if(chIndex<strings[index].length) 
    span.innerHTML=strings[index].substring(0,chIndex++); 
    else 
    type=false; 
} 

//delete the string 
function deleteIt(){ 
    if(chIndex===0){ 
    index++; 
    type=true; 
    } 
    else 
    span.innerHTML=strings[index].substring(0,chIndex--); 
} 

HTML

<span id="content"></span> 
<span id="cursor">|</span> 

文字列の変更の開始時にsetInterval関数を一時停止し、最後にgetはっきりと点滅するカーソル。

私は他の回答Pause and resume setIntervalとHow do I stop a window.setInterval in javascript?を探しましたが、私はこの文脈でどのように使用するのか理解できません。

また、コードを改善する方法を教えていただければ幸いです。

Answer 1

をごjsfiddleが帰ってきた：https://jsfiddle.net/yzfb8zow/5/

また少しコード説​​明

var typingFunction = function() { 
    if (index === strings.length) { 
    index = 0; 
    } 

    if (type) { 
    typeIt(); 
    } else { 
    deleteIt(); 
    } 
} 

私はあなたの以前の入力機能を、後で希望通りに使用できるように宣言しました。

var x = setInterval(typingFunction.bind(typingFunction), 200); 

I、後でそれをクリアできるように間隔をストアド - （OK必ずしも、そこに他の解決策であるが、それを格納する）グローバル変数に格納されています。 typeIt機能で

function typeIt() { 
if (chIndex == -1) { 
    chIndex += 1; 
    clearAndRestartInterval(1000); 
    return; 
    } 


    if (chIndex <= strings[index].length) { 
    span.innerHTML = strings[index].substring(0, chIndex++); 
    } else { 
    clearAndRestartInterval(1000); 
    type = false; 
    return; 
    } 
} 

chIndex = -1での初めのI明確な間隔、私は間隔を再起動する前に、カーソルを点滅させながら待ちます。ストリングの終わりにもう一度クリアします。私のchIndexは-1から始まるので、いつ始まりに点滅するかを知っています。

その他のコードは、自己説明的です。

clearAndRestartInterval関数のパラメータを自由に編集して、開始時と終了時の点滅の時間を設定します。

function clearAndRestartInterval(timeOfRestart) { 
    clearInterval(x); 
    setTimeout(function() { 
     x = setInterval(typingFunction.bind(typingFunction), 200); 
    }, timeOfRestart); 
} 

最後に、間隔の停止と再開の機能です。これはかなりシンプルで、xは以前に宣言されたsetIntervalです - グローバルにクリアして新しいインターバルでリセットします。

これが役に立ちます。

乾杯

Answer 2

ネストされたタイムアウトを使用する必要があります。

• typeItをデフォルト動作として直接呼び出します。
• typeItに、完了時にdeleteItを呼び出すsetTimeoutを追加します。
• deleteItが完了したら、もう一度typeItを呼び出します。

Sample Fiddle

あなたはtypeitは次のようになります。私はここにあなたのコードを編集した

function typeIt() { 
    var t_interval = setInterval(function() { 
    if (chIndex <= strings[index].length) 
     span.innerHTML = strings[index].substring(0, chIndex++); 
    else { 
     type = false; 
     // This is to be executed once action is completed. 
     window.clearInterval(t_interval); 
    } 
    }, 20) 
}