用 jQuery 模拟打字，暂停或延长 setInterval 函数

Question

所以我想制作一个 jQuery 应用程序，其中文本在屏幕上被动画化，看起来好像有人在输入什么东西。我以最简单的形式实现了这一点。

HTML

<p></p>

jQuery

$(document).ready(function() {
    var p = $('p');
    p.text('');


    window.setInterval(function(){
        inc(p);
    }, 100);

});

var i = 0;

function inc(p)
{

    var text = "Hey... This is just a test";
    p.append(text.charAt(i));
    i++;
}

我想知道的是，在“嘿……”之后我怎么可能告诉函数停止 2 秒？或者我想要的任何数量。

我有一个想法，但它非常低效且“蹩脚”，那就是添加尽可能多的空格以在 2 秒内不打印任何内容，然后将字符串替换为空格之前的所有内容并继续追加。

这太糟糕了，我想要一种更好的方法。任何人都可以给我任何建议吗？ setInterval 是正确的函数还是我应该使用 setTimeout？

Here's 我的代码的小提琴。

感谢任何帮助或建议，非常感谢。

Answer 1

我想有更好的方法可以做到这一点，但我正在发布我的工作答案。

我在你的inc 函数中用setTimeout 替换了你的setInterval。所以它现在是递归的。

您可以通过检查索引来更改键入某个字符时的间隔。

编辑：

在 OP 评论之后，我更改了答案，因此您可以使用拥抱在文本内设置延迟。

$(document).ready(function() {
    var p = $('p');
    p.text('');

    inc(p);
});

var i = 0;
var j = 0;

function inc(p) {
  var interval = 0.1;
  var text = "Hey... {2} This is a {1} test";
  var array = text.split(/[\{\}]/); // Split on embraces
  
  if (i < array.length) {
    p.append(array[i].charAt(j));
    
    if (j == array[i].length -1 && typeof array[i + 1] !== "undefined") {
      interval = array[i + 1];
      i += 2;
      j = 0;
    }
    
    j++;
    setTimeout(function () { inc(p); }, interval*1000);
  }
}

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

Answer 2

试试这个，jsFiddle

$(document).ready(function() {
    var $p = $('p');
    $p.text('');
    waitFun($p);  
});
var timer;
var wait_time=2000;
var wait_point=7;
var count=0;
function waitFun($p){
  clearTimeout(timer);
    timer = window.setTimeout(function(){
  var text = "Hey... This is just a test";
    $p.append(text.charAt(count));
    count++;
  if(text.length == count) {return false} //avoid of infinte loop

  if(count == wait_point){
    window.setTimeout(function(){
        waitFun($p);
    },wait_time);
  }else{
  waitFun($p);
  }

  },100);

}