JavaScript

JavaScript автонабор/автоудаление текста

Есть такой код
"var i = 0;
var txt = 'Do Re Mi Fa So La Si';
var speed = 90;

function fu() {
if (i < txt.length) {
document.getElementById("text").innerHTML += txt.charAt(i);
i++;
setTimeout(fu, speed);
}
}
fu()

function mi(){
var m = document.getElementById("mig");
m.style = o
}
"
он автоматический вводит текст, но я хочу что бы после ввода текста, т. е после того как напечатается последняя буква, она автоматически начинала удалять буквы с последнего до первый, удалять по одному, а потом начинать печатать другое слово скажем, можете помочь? Был бы очень признателен если бы дали гайд какой нибудь, или ссылку на код с объяснением как сработало.
ZS
Zarif Samidjanov
644
Делать анимацию на setTimeout, да еще и на каждой итерации искать в документе, да еще и одинаковые строки постоянно пересоздавать по одной букве - ужас, глупее и придумать нельзя.
́
Правильные веб-анимации пишутся так, чтобы как можно больше делать средствами CSS, и как можно меньше менять сам контент документа. JS при этом занимается исключительно логикой - обработкой данных, переключением классов, и т. д.. Конечно, это требует больше кода чем короткие и тупые решения, но результат ГОРАЗДО эффективнее.
́
Пример: https://jsbin.com/wuyutex/edit?js,output
Замена контента и создание строк в цикле - только когда это действительно необходимо (можно оптимизировать еще больше, поместив span'ы всех фраз в контейнеры). Плюс, основная часть вставляемой разметки "закэширована" в массиве texts, который генерится всего один раз. Лучше бы и span каретки сразу добавить в каждый элемент этого массива (чтобы новых строк вообще не создавать), это уже я стормозил :]
Медеу Сейтбаев
Медеу Сейтбаев
92 871

Похожие вопросы