Ich brauche eine Verzögerung, die nicht gesetzt ist Timeout()

Question

Das ist der Code, den ich habe und ich möchte es so machen, dass die Buchstaben (Satzparameter) sich einzeln eingeben. Nicht alle gleichzeitig. Ich versuche es mit setTimeout(), aber ich kann es nicht machen, damit es weitergeht. Bitte helfen Sie.

var letters = []; 

function typeOut(sentence, code) { 
    $('body').append('<p id=' + code + '></p>'); 


    for (i = 0; i < sentence.length; i++) { 
     letters[i] = sentence[i]; 
     $('#' + code).append(letters[i]); 
    } 
} 

typeOut("Hello World", 1); 

Vielen Dank im Voraus!

Answer 1

setTimeout scheint perfekt. Ich nehme an, Sie benutzen es falsch.

function typeOut(sentence) { 
 
    var txt = document.body 
 
    .appendChild(document.createElement('p')) 
 
    .appendChild(document.createTextNode('')); 
 
    var i = 0; 
 
    (function typeLetter() { 
 
    if(i < sentence.length) { 
 
     txt.nodeValue += sentence[i]; 
 
     ++i; 
 
     setTimeout(typeLetter, 100); 
 
    } 
 
    })(); 
 
} 
 
typeOut("Hello World");

Answer 2

Es gibt viele Wege, diese Arbeit machen könnten Sie auch diese Lösung arbeiten zu

var letters = []; 
 

 
function typeOut(sentence, code) { 
 
    $('body').append('<p id=' + code + '></p>'); 
 
    self = this; 
 
    self.currentIndex = 0; 
 
    self.sentence = sentence; 
 
    
 
\t var write = function(){ 
 
    \t if(self.currentIndex < sentence.length) { 
 
      letter = sentence[self.currentIndex]; 
 
      $('#' + code).append(letter); 
 
      self.currentIndex+=1; 
 
    \t }else { 
 
      clearInterval(self.writeHandler); 
 
     } 
 
    } 
 
    
 
    self.writeHandler = setInterval(write, 500) 
 
} 
 

 
typeOut("Hello World", "div1");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<p id="div1"></p>

hier auf jsbin check this

Answer 3

Ich hatte Spaß mit dieser Frage ....
ich ein wenig mehr getan haben, als Sie gefragt.
Aber ich denke, Sie werden es mögen.

Siehe in this CodePen.

Meine Version Ihrer typeOut Funktion:

function typeOut(sentence, code) { 
    $('body').append('<p id=' + code + '></p>'); 

    var i=0; 
    var letterDelay = setInterval(function(){ 
     $('#' + code).append(sentence[i]); 
     i++; 
    }, $("#speed").val()); 
} 

Answer 4

Es gibt wirklich nicht so viele Optionen, ist das einzige, was für diese Timer, entweder setTimout oder setInterval.

Man konnte immer jQuery verwenden delay() Methode, aber intern verwendet es auch setTimeout

function typeOut(sentence, speed) { 
 
    var p = $('<p />'), i = 0; 
 
    $('body').append(p); 
 
    
 
    (function go() { 
 
     p.dequeue().append(sentence[i++]).delay(speed).queue(go); 
 
    })(); 
 
} 
 

 
typeOut("Hello World", 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 5

Warum niemand daran erinnern, dass setTimeout mehr als zwei Argumente akzeptiert? Es ist eine sehr praktische Funktion. Dies ist meine Version von typeOut.

function typeOut(text) { 
 
    var out = document.getElementById('out'); 
 
    out.innerHTML = ''; 
 
    setTimeout(function typeNext(i) { //internal function can be named 
 
     out.innerHTML += text[i++]; 
 
     if (i < text.length) 
 
      setTimeout(typeNext, 100, i); 
 
    }, 100, 0); //3rd arg goes to the function 
 
}

<p id="out"></p> 
 
<button type="button" onclick="typeOut('Hello World');">Type Out</button>