JS-код для создания эффекта ввода при загрузке страницы приветствия для массива строк, в которых есть слова, которые читаются слева направо, а также справа налево

Question

Я структурировал эффект ввода по типу, а также по удалению, прежде чем набирать следующую строку в моем массиве. Структура, которую я использовал для своего кода, адаптирована из кода на UsefulAngle.com: https://usefulangle.com/post/75/typing-effect-animation-javascript-css

Я столкнулся с несколькими проблемами при рефакторинге кода:

1. Я пыталсярефакторинг функций Type и Delete (не показаны; они показаны в ссылке в первом абзаце выше, и что фактический код работает и находится в моем удаленном файле JS). Я попытался провести рефакторинг в функции TypeRTL и DeleteLTR соответственно (показано в фрагменте кода ниже). Это не сработало.

2. Даже если бы мне удалось успешно выполнить рефакторинг, чтобы приспособить код TypeRTL и DeleteLTR, я столкнулся с проблемой возможности запустить только одну строку кода, которая может 'в операторе if-else не должно быть эффекта типизации при загрузке страницы. Мне пришлось бы выбирать между вводом LTR и RTL, потому что мне нужно было бы указать в одной строке кода: _INTERVAL_VAL = setInterval (Type, 100);ИЛИ _INTERVAL_VAL = setInterval (TypeRTL, 100);

3. Для слов справа налево, таких как на арабском языке, я хочу убедиться, что на самом деле ввод происходит справа налево, принимаясамый правый символ как первое, что нужно напечатать. Я бы предположил, что мне придется разделить () строку, получив таким образом массив, обратный () порядок в массиве, join (), чтобы самый правый символ действительно печатался первым. Правильно ли мое предположение при обработке этих слов справа налево для того, чтобы эффект печатания справа налево работал?

   • Я неудачно реорганизовал JS для функций TypeRTL и DeleteLTR.
   • Я неудачно рефакторинг, чтобы заставить эффект ввода работать для слов справа налево и слов слева направо, чтобы последовательно печататься и удаляться при загрузке.
   • Как неАрабский читатель, я также сбит с толку, если бы мне пришлось создать функцию, чтобы разделить символы в слове на массив, обратить их обратно и перестроить их ИЛИ, если будет работать метод подстроки (как показано в коде ниже). Может ли какой-нибудь арабский читатель-кодировщик ответить на этот вопрос?

********** HTML *************

    <div id="text"></div>
        <div id="cursor-ltr"></div>
        <div id="cursor-rtl"></div>
   </div>

********** CSS *************

#container {
    text-align: center;
}

#text {
    display: inline-block;
    vertical-align: middle;
    color: orange;
    letter-spacing: 2px;
}

#cursor-rtl {
    display: inline-block;
    vertical-align: middle;
    width: 3px;
    height: 50px;
    background-color: orange;
    animation: blink .75s step-start infinite;
}

@keyframes blink {
    from, to { 
        background-color: transparent 
    }
    50% { 
        background-color: orange; 
    }
}

********** JS *************
// List of strings
var _CONTENT = [ 
    "Twinkle", //English
    "وميض", //Arabic
    "טווינגקאַל", //Yiddish
    "estrella" //Spanish
];

// Current string being processed
var _PART = 0;

// Character number of the current string being processed 
var _PART_INDEX = 0;

// Holds the handle returned from setInterval
var _INTERVAL_VAL;

// Element that holds the text
var _ELEMENT = document.querySelector("#text");

// Cursor element 
var _CURSOR = document.querySelector("#cursor-rtl");

// Implements typing effect
function TypeRTL() { 
    var toReverseArr = _CONTENT[_PART].split();
    var reversedArr = toReverseArr.reverse();
    var stringify = reversedArr.join("");

    // Get substring with 1 character added
    var text = stringify.substring(_PART_INDEX, 0);
    _ELEMENT.innerHTML = text;
    _PART_INDEX++;

    // If full sentence has been displayed then start to delete the sentence after some time
    if(text === _CONTENT[i]) {
    // Hide the cursor
    _CURSOR.style.display = 'none';

    clearInterval(_INTERVAL_VAL);
    setTimeout(function() {
            _INTERVAL_VAL = setInterval(DeleteLTR, 50);
    }, 1000);
    }
}


// Implements deleting effect
function DeleteLTR() {
    // Get substring with 1 character deleted
    var text =  _CONTENT[_PART].substring(0, _PART_INDEX - 1);
    _ELEMENT.innerHTML = text;
    _PART_INDEX--;

    // If sentence has been deleted then start to display the next sentence
    if(text === '') {
        clearInterval(_INTERVAL_VAL);

    // If current sentence was last then display the first one, else move to the next
    if(_PART == (_CONTENT.length - 1))
    _PART = 0;
        else _PART++;

    _PART_INDEX = 0;

    // Start to display the next sentence after some time
    setTimeout(function() {
        _CURSOR.style.display = 'inline-block';
        _INTERVAL_VAL = setInterval(TypeRTL, 100);
    }, 200);
    }
}

// Start the typing effect on load
_INTERVAL_VAL = setInterval(TypeRTL, 100);