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++;
}

我想知道的是，我怎么可能在＆＃34;嘿...＆＃34;告诉函数停止2秒？或者无论我想要多少。

我有一个想法，但效率非常低，而且很糟糕＆＃34;，就是要添加尽可能多的空格，而不是2秒钟打印，然后用一切代替字符串在空白之前继续追加。

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

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

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

Answer 1

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

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

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

编辑：

OP评论后，我改变了答案，以便您可以使用embraces在文本中设置延迟。

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

}

使用jQuery模拟键入，暂停或延长setInterval函数

2 个答案: