Имитация ввода с помощью 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

Я думаю, что есть лучший способ сделать это, но я отправляю свой рабочий ответ.

Я заменил вас setIntervalsetTimeout внутри вашей функции inc. Так что теперь он рекурсивный.

И вы можете изменить интервал, когда определенный символ вводится путем проверки индекса.

EDIT:

После О.П. комментарий я изменил мой ответ, так что вы можете установить задержку внутри текста с помощью объятий.

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

}