使用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函數中將setInterval替換爲setTimeout。所以它現在是遞歸的。

您可以通過檢查索引來更改某個特定字符的輸入時間間隔。

編輯：

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

}