Проблема состоит в том, чтобы вывести несколько строк из массива с анимацией в виде печати, а потом удаления и так далее со следующей строкой. С одной строкой проблем никаких не возникло, но когда я начал зацикливать функцию для работы с переменным количеством строк в массиве (пробовал и циклы и интервалы) скрипт стал вести себя не адыкватно (начинал печать не с той строки, одновременно и печатал и удалял, иногда даже разные предложения). Вот код для работы с нулевой строкой из переданного массива:
<span id="printer"></span>
<script>
function Print(data)
{
if(typeof data.id === "undefined" || data.id == "")
{
console.error("Error!");
return -1;
}
if(typeof data.phrases === "undefined" || data.phrases == "" || data.phrases == [])
{
console.error("Error!");
return -1;
}
let elem = document.querySelector("#"+data.id);
let phrases = data.phrases;
let delayBefore = data.delayBefore || 500;
let delayAfter = data.delayAfter || 3000;
let speed = data.speed || 100;
let dir = 0;
elem.innerHTML = "│";
draw(phrases[0], speed, elem, delayBefore, delayAfter);
}
function draw(phrase, speed, elem, delayBefore, delayAfter)
{
setTimeout(function(){
printing(phrase, speed, elem);
},delayBefore);
setTimeout(function(){
clearing(phrase, speed, elem);
},delayBefore + delayAfter + (phrase.length * speed));
}
function printing(phrase, speed, elem)
{
let i = 0, text = "";
let p = setInterval(function(){
text += phrase[i];
elem.innerHTML = text+" │";
i++;
if(i == phrase.length) clearInterval(p);
}, speed);
}
function clearing(phrase, speed, elem)
{
let i = phrase.length - 1, text = "";
let c = setInterval(function(){
text = "";
for(let j = 0; j <= i; j++) text += phrase[j];
elem.innerHTML = text+" │";
i--;
if(i == phrase.length) clearInterval(p);
}, speed/4);
}
Print({
id: "printer",
phrases: [
"You can take my heart, you can take my breath",
"When you pry it from my cold, dead chest",
"This is how we rise up",
"Heavy as a hurricane, louder freight train",
"This is how we rise up",
"Heart is beating faster, feels like thunder",
"Magic, static, call me a fanatic",
"It's our world, they can naver have it",
"This is how we rise up",
"It's out resistance, you can't resist us"
],
delayBefore: 1000,
delayAfter: 2000,
speed: 50
});
</script>
draw
у вас будет несколько запущенных интервалов. Ваша функцияclearing
очищает элемент, но не очищает интервал