Question

这是我拥有的代码，我希望它能够使字母（句子参数）逐个输入。不是一次一个。我一直在尝试使用setTimeout（），但我不能这样做，以便它保持它的进展。请帮忙。

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);

提前致谢！

Answer 1

setTimeout似乎很完美。我猜你用的不对。

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

有很多方法可以让这项工作可以解决这个问题

 var letters = [];

function typeOut(sentence, code) {
    $('body').append('<p id=' + code + '></p>');
    self = this;
    self.currentIndex = 0;
    self.sentence = sentence;
    
	  var write =  function (){
    	if(self.currentIndex < sentence.length) {
          letter = sentence[self.currentIndex];
          $('#' + code).append(letter);
           self.currentIndex+=1;
    	}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>

这里是jsbin check this

Answer 3

我对这个问题很开心.... 我可能比你提出的要多一点但我想你会喜欢它。

见this CodePen。

我的typeOut功能版本：

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

确实没有那么多选项，唯一适用的是定时器，setTimout或setInterval。

你总是可以使用jQuery的delay()方法，但在内部它也使用setTimeout

＆＃13;

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);

＆＃13;

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

＆＃13;

Answer 5

为什么没有人记得setTimeout接受两个以上的论点？这是非常方便的功能。这是我的typeOut版本。

＆＃13;

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
}

＆＃13;

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

＆＃13;

我需要一个不是setTimeout（）的延迟

5 个答案: