Javascript 逐个从字符串中删除字符

我一直在尝试创建一种效果，就像在我的网页中键入字符串一样。换句话说，该字符串将逐个字符显示。因此，我使用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和主节

span.text（）

，但它不起作用，并给出了一些奇怪的结果

我还尝试了其他方法，但主要是将

text（）

与replace进行组合

---

所以，任何人都可以帮我解决这个问题吗？

编辑：更改代码

这是您的解决方案：）

使用

split（）

const str=“马上就来…”；
让定时器；
函数删除效果（）{
让word=str.split（“”）；
var loopDeleting=函数（）{
word.pop（）；
document.getElementById（'word'）.innerHTML=word.join（“”）；
定时器=设置超时（循环删除，200）；
};
循环删除（）；
};
删除效应（）
您可能应该清除该间隔以获得预期结果，请参阅：

HTML:

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

$(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);
})



JS:

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

$(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);
})

$（函数（）{
var string=“即将推出”，
stringCount=0；
var animation=setInterval（函数（）{
$（'.main_section_animate span'）。追加（字符串[stringCount]）；
stringCount+=1；
if（stringCount>=string.length）{
clearInterval（动画）；
动画=设置间隔（函数（）{
$（'.main_section_animate span'）.text（string.substr（0，stringCount））；
stringCount-=1；
if（stringCount使用
.slice（）
和一个简单的
for
循环来获取所需的内容

let str='Coming Soon |'；
对于（设i=-1+str.length；i>0；i--）{
设延迟=100*（str.length-（i+1））
设置超时（（）=>{
$（'.main_section_animate span'）.html（str.slice（0，i））；
}，延误）；
}

请注意，for
的
循环从
.length
开始，向下移动（
i--
），而
i>0
。这为您提供了一种使用
str.slice（）
的简便方法

还请注意删除了
setInterval
，这在您的情况下是对CPU的浪费。相反，只需为每次删除设置一次
setTimeout

最后，使用
.html
而不是
。append
可以：


let str='Coming Soon |'；
常量$span=$（'.main_section_animate span'）；
$span.html（str）；
常量动画=设置间隔（（）=>{
str=str.slice（0，-1）
$span.html（str）
！str.length&&clearInterval（动画）
}，100）

您能显示您试图删除字符的代码吗？这可能有助于进一步调试。您应该阅读以下内容：嘿嘿，同一时间！比我长，但结果完全相同：）通常设置许多这样的超时是不好的做法，而不是使用间隔（当“循环”时，您会清除间隔）已完成）。正确：）已编辑