удаление символа из строки один за другим

Question

Я пытался создать эффект, как будто строка набирается на моей веб-странице. Другими словами, эта строка будет появляться символ за символом. поэтому я сделал это с помощью jquery и добился успеха. код, который я использовал, выглядит примерно так:

$(function() {
  var string = "Coming Soon|",
      stringCount = 0;

  setInterval(function(){
    $('.main_section_animate span').append(string[stringCount]);
    stringCount += 1;
  },100);
})

Обратите внимание, что тег span пуст, там ничего нет.

Проблема в том, что я пытаюсь удалить строку символ за символом, назад. Я пытался использовать setInterval и replace(string[stringCount],''), выбирая диапазон основного раздела и основной раздел span.text(), но это не сработало и дало странные результаты.

А также есть еще кое-что, что я пробовал но в основном какая-то комбинация text() с заменой, так что кто-нибудь может мне помочь с этим?

Answer 1

может быть:

let str = 'Coming Soon |';

const $span = $('.main_section_animate span');

$span.html(str);

const animation = setInterval(() => {
  str = str.slice(0, -1)
  $span.html(str)
  
  !str.length && clearInterval(animation)
}, 100)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main_section_animate">
<span></span>
</div>

Answer 2

Вам, вероятно, следует очистить этот интервал, чтобы получить ожидаемый результат, см .: https://jsfiddle.net/2mj5zp7h/

HTML:

<div class="main_section_animate">
<span></span>
</div>

JS:

$(function() {
  var string = "Coming Soon|",
      stringCount = 0;

  var animation = setInterval(function(){
    $('.main_section_animate span').append(string[stringCount]);
    stringCount += 1;
    if(stringCount>=string.length) {
        clearInterval(animation);
        animation = setInterval(function(){
            $('.main_section_animate span').text(string.substr(0,stringCount));
            stringCount -=1;
          if(stringCount<0)
            clearInterval(animation);
        },100);
    }
  },100);
})

Answer 3

РЕДАКТИРОВАНИЕ: Изменить код.

Это решение для вас:)

Использование split();

const str = "Coming Soon ...";
let timer;

function deletingEffect() {
	let word = str.split("");
	var loopDeleting = function() {
          word.pop();
          document.getElementById('word').innerHTML = word.join("");
          timer = setTimeout(loopDeleting, 200);
	};
	loopDeleting();
};

deletingEffect();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main_section_animate">
<span id="word"></span>
</div>

Answer 4

Используйте .slice() и простой for l oop, чтобы получить то, что вам нужно.

let str = 'Coming Soon|';
for (let i = -1+str.length; i > 0; i--) {
  let delay = 100*(str.length-(i+1))
  setTimeout(()=>{
    $('.main_section_animate span').html( str.slice(0, i) );
  }, delay);
}

Обратите внимание, что for l oop начинается с .length и идет вниз ( i--) пока i > 0. Это дает вам простой способ использования str.slice().

Также обратите внимание на удаление setInterval, которое является пустой тратой CPU в вашем случае. Вместо этого просто установите один выстрел setTimeout для каждого удаления.

Наконец, используйте .html вместо .append.