Javascript перебирает массив строк и добавляет к каждому эффект ввода / удаления, выполняя одну за другой

Question

Javascript перебирает массив строк и добавляет к каждому эффект ввода / удаления, выполняя одну за другой

1

Компонент, который я создаю, предназначен для ввода и удаления списка строк. В настоящее время у меня есть эффект ввода/удаления. Однако я не могу заставить цикл работать правильно.

Желаемый эффект состоит в том, чтобы набрать + untype первую строку, THEN второй, THEN третий и т.д.

var pos = 0
var speed = 50
var speed2 = 100
var str = document.getElementById('str')
var i

var messages = [
    "Cyber Security",
    "Vulnerability Assessments",
    "Program Management",
    "Compliance Management"
]

messages.forEach(function (message) {

    function type() {
        console.log('Type ' + pos)
        if (pos < message.length) {
            str.innerText += message.charAt(pos)
            pos++
            setTimeout(type, speed) //call this fn again to type letters
        } else {
            setTimeout(erase, speed2)
        }
    }

    type(type, speed)

    //erase fn
    function erase() {
        console.log('Erase ' + pos)
        if (pos >= 0) {
            var temp = message.substring(0, pos)
            str.innerText = temp
            pos--
            setTimeout(erase, speed2)
        }
    }
})

<section class="hollow-hero-21">
    <div class="flex-container">
        <h1>
            Innovative Solutions
            <br>for
            <span id="str"></span>
        </h1>
        <hr>
        <p>This is filler content. The text in this area will be replaced when copy for the site becomes available. This is filler content. The text in this area will be replaced when copy for the site becomes available.</p>
        <a href="#">Learn More</a>
    </div>
</section>

Kevin Grant 02 окт. 2018, в 02:34

Источник

0

Ну, вы начинаете все свои печатать и стирать одновременно. Я бы сказал, что вам не нужен блок messages.forEach и просто проверьте в методе erase есть ли в вашем массиве следующий элемент, и когда да, начните его вводить. Требуется только сохранить индекс для текущего элемента, который вы печатаете / стираете
Icepickle 02 окт. 2018, в 07:32

Теги:

javascript

html5

css3

1 ответ

Ещё вопросы

Ну, вы начинаете все свои печатать и стирать одновременно. Я бы сказал, что вам не нужен блок messages.forEach и просто проверьте в методе erase есть ли в вашем массиве следующий элемент, и когда да, начните его вводить. Требуется только сохранить индекс для текущего элемента, который вы печатаете / стираете

Icepickle · Accepted Answer · 2018-10-02T05-54-00.000Z

В настоящее время у вас возникла проблема с тем, что вы запускаете все операции ввода и последующего удаления в одно и то же время из-за вашего цикла messages.forEach.

Этот цикл не нужен, так как вы хотите подождать, пока каждое слово будет напечатано и удалено. Поэтому вам нужно будет запомнить индекс вашего текущего сообщения, пока вы его печатаете и удаляете, а затем обновляете его после того, как последнее слово было удалено.

Я изменил свой сценарий так, чтобы цикл был удален, и на данный момент есть только 1 действие, с битом бит, говорящим, что это isRemoving. Лично я бы предпочел сделать это с помощью setInterval но не изменил желаемое поведение, вместо этого добавил setTimeout.

Эта версия будет работать бесконечно, так как после удаления последнего слова из массива она вернется к первому сообщению в вашем массиве.

var speed = 50;
var speed2 = 100;
var str = document.getElementById('str');
var i = 0;
var isRemoving = false;

var messages = [
    "Cyber Security",
    "Vulnerability Assessments",
    "Program Management",
    "Compliance Management"
]

function action() {
  if (isRemoving) {
    if (str.innerText.length > 0) {
      str.innerText = str.innerText.substr(0, str.innerHTML.length - 1);
      setTimeout( action, speed2 );
      return;
    }
    isRemoving = false;
    i++;
    if (i >= messages.length) {
      i = 0;
    }
    setTimeout( action, speed );
    return;
  }
  var message = messages[i];
  str.innerText = message.substr(0, str.innerHTML.length + 1);
  if (str.innerText.length === message.length) {
    isRemoving = true;
  }
  setTimeout( action, isRemoving ? speed2 : speed );
}

setTimeout( action, speed ) ;

<section class="hollow-hero-21">
    <div class="flex-container">
        <h1>
            Innovative Solutions
            <br>for
            <span id="str"></span>
        </h1>
        <hr>
        <p>This is filler content. The text in this area will be replaced when copy for the site becomes available. This is filler content. The text in this area will be replaced when copy for the site becomes available.</p>
        <a href="#">Learn More</a>
    </div>
</section>

Большое спасибо Icepickle. После добавления пары деталей, я получил все, что хотел, с вашим решением.