Javascriptのタイプライターが適切に書き込んでバックスペースしない

バックスペース付きの単純なJavaScript/jQueryタイプライターを作成しました。これはいくつかのメッセージ（背景画像&）をループします。Javascriptのタイプライターが適切に書き込んでバックスペースしない

私が直面している問題は、関数ループとして、正しく書かれていないことです。いくつかの文字が欠落しています。

私の配列は[誰もが、犬の所有者、ダイエット意識の高い、労働者、家族]ですが、順番に書かれているものは：ryone、g所有者、ダイエット意識、（空白）、家族です。

私は、変数がどこか適切にリセットされていないことや、長さが以前のメッセージ（有効なスコープの問題）から解決されている可能性があると思います。 Codepenで

：https://codepen.io/nathankeenmelb/pen/MOovXJ?editors=0010

関連するHTMLは、jQueryの

let messages = [ 
    " everyone.", 
    " dog owners.", 
    " the diet-conscious.", 
    " workers.", 
    " families." 
]; 
let images = [ 
    "url(https://via.placeholder.com/200x100)", 
    "url(https://via.placeholder.com/400x100)", 
    "url(https://via.placeholder.com/400x200)", 
    "url(https://via.placeholder.com/400x300)", 
    "url(https://via.placeholder.com/400x400)" 
]; 

let loopDuration = 3000; 

function displayImages(arr){ 
    //Loop through other images, but start at second item 
    let j = 1; 
    setInterval(//evaluates every x ms 
     function(){ 
      $('body').css("background-image",arr[j]); 
      j++; 
      console.log('j in image = ' + j); 
      //Reset loop after been through them all to repeat 
      if(j >= images.length) j = 0; 
      //Interval length in ms 
     }, loopDuration); 
} 

function displayMessages() { 

    //CHANGE THE MESSAGE -starting the loop 
    let i = 0; 
    setInterval(//evaluates every x ms 
     function(){ 
      //TYPEWRITE MESSAGE 
      let char = 0; 
      function typeWriter() { 
       //for as long as the current character length is less than the full character length 

       if (char < messages[i].length) { 
       //Add the next character to the html 
       document.getElementById("message").innerHTML += messages[i].charAt(char); 

       //Go to next character 
       char++; 
       //Wait x ms to write next character 
       setTimeout(typeWriter, 50); 
       } 

      } //end typewriter() 

      //Run the function 
      typeWriter(); 

      //START BACKSPACE 
      let theMessage = document.getElementById("message").innerHTML; 
      let bchar = theMessage.length; 

      function backSpacer() { 
      if (bchar > 0) { 
       theMessage = theMessage.slice(0,-1); 
       document.getElementById("message").innerHTML = theMessage; 
       bchar--; 
       //Run the function again, after x m 
       setTimeout(backSpacer, 25); 
      } 
      } 
      //Run the function 
      backSpacer(); 

      //If instead of using backspacer() I deleted the text as follows, that worked fine 
      //$('#message').text(''); 
      //document.getElementById("message").innerHTML = ""; 


      //Having typed it all out, backspaced it, go to the next message 
      i++; 

      //Having gone through each message, reset loop to repeat, to 0 to include the original 
      if(i >= messages.length) i = 0; 
      //Interval length in ms 
     }, loopDuration); 

} 

//Wait till the whole page loads 
window.onload = function loadChanges() { 
    setTimeout(function() { 
    //Run whatever after time elapses 
    displayImages(images); 
    displayMessages(); 
    //Wait x ms after page loads 
    }, 1000) 
};

出典

2017-11-16 Nathan

トラブルシューティングのヒント＃1：簡略化。これは大きくて難しいコードセットです。可能な限り小さな部分に分解し、それをテストし、それを働かせて（あるいは何が間違っているのか把握して）、それを構築します。非常に多くのコードと再帰とタイムアウトで一瞬に何かに取り組もうとしています - それはあなたが必要とする以上に多くの作業です。 –

と

<body> 
    <div> 
    <h2>There's something for<span id="message"> everyone.</span></h2> 
    </div> 
</body>

JS、私はあなたのコードビットを見ました。 typeWriterとbackSpacerの両方を同時に実行していたようです。あなたはタイプライターやバックスペイサーの両方を呼び出して見ることができるように

setInterval(function(){ function typeWriter() { if (char < messages[i].length) { char++; setTimeout(typeWriter, 50); } } typeWriter(); let bchar = theMessage.length; function backSpacer() { if (bchar > 0) { bchar--; setTimeout(backSpacer, 25); } } backSpacer(); }, loopDuration);

：

あなたのコードは、この構造を（私はそれをたくさん簡略化されました）でした。 setTimeoutは、これらのメソッドを "並行して"実行し、同時にメッセージを取り除いて追加して、メッセージが混乱するようにします。

ステートマシンのような実例を作成しました。最初にメッセージを入力することを意味します。それが完了すると、メッセージの消去に切り替わります。それが完了すると、再起動するのを待ちます。

コードは素晴らしいわけではありませんが、それは機能しており、実際の解決策を得るのに役立ちます。ご質問がある場合は、コメントに私にお知らせください。

https://codepen.io/andreasmcdermott/pen/ZaXXyK?editors=0010

出典

2017-11-16 05:30:31 amcdrmtt

ありがとうございました。問題を解決し、タイミングを正しく取得するためのより良い方法を提供しました。私はあなたのソリューションのロジックを見ることができると思うので、私はこれをソリューションと呼んでいます。 – Nathan

Javascriptのタイプライターが適切に書き込んでバックスペースしない

答えて

関連する問題