在最后一个数组停止自动类型

问题描述

当到达最后一个数组时，我试图停止擦除我的“自动输入的文本”。 我一直在 Google 上搜索，但找不到任何解决方案。

Some(x @ 6..=10)

x @ 6..=10

解决方法

目前，您的函数一直在相互调用，而没有任何停止某处的信号。您已经使用 textArray 跟踪您的索引当前在 textArrayIndex 中的位置。使用它来查看 else 函数的 type 语句中是否已到达结尾。

if (textArrayIndex < textArray.length - 1) {
  setTimeout(erase,newTextDelay);
}

这里检查当前索引是否低于数组的最后一个索引。如果是，它将继续调用 erase 函数并使用 textArrayIndex 递增 1。否则当索引不低于最后一个索引时，意味着它是最后一个，它什么都不做，从而打破循环。

const typedTextSpan = document.querySelector(".typed-text");
const cursorSpan = document.querySelector(".cursor");
const textArray = ["reconnaitre un talent ?","détécter une opportunité ?"];
const typingDelay = 170;
const erasingDelay = 100;
const newTextDelay = 2000;
let textArrayIndex = 0;
let charIndex = 0;

function type() {
  if (charIndex < textArray[textArrayIndex].length) {
    if (cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
    typedTextSpan.textContent += textArray[textArrayIndex].charAt(charIndex);
    charIndex++;
    setTimeout(type,typingDelay);
  } else {
    cursorSpan.classList.remove("typing");
    
    // Erase if the end has not yet been reached.
    if (textArrayIndex < textArray.length - 1) {
      setTimeout(erase,newTextDelay);
    }
  }
}

function erase() {
  if (charIndex > 0) {
    if (!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
    typedTextSpan.textContent = textArray[textArrayIndex].substring(0,charIndex - 1);
    charIndex--;
    setTimeout(erase,erasingDelay);
  } else {
    cursorSpan.classList.remove("typing");
    textArrayIndex++;
    setTimeout(type,typingDelay + 1100);
  }
}

document.addEventListener("DOMContentLoaded",function() {
  if (textArray.length) setTimeout(type,newTextDelay + 250);
});

<div class="container" id="container">
  <h1>Savez-vous <span class="typed-text" id="typed-text"></span><span class="cursor" id="cursor">&nbsp;</span></h1>
</div>

,

您需要将 textArrayIndex 与擦除函数中的 textArray 长度进行比较。请检查以下代码。

const typedTextSpan = document.querySelector(".typed-text");
const cursorSpan = document.querySelector(".cursor");
const textArray = ["reconnaitre un talent ?",typingDelay);
  } else {
    cursorSpan.classList.remove("typing");
    setTimeout(erase,newTextDelay);
  }
}

function erase() {
  // Check index
  if(textArrayIndex == textArray.length - 1) {
      // Stop Erase
      return false; 
  }
  if (charIndex > 0) {
    if (!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
    typedTextSpan.textContent = textArray[textArrayIndex].substring(0,erasingDelay);
  } else {
    cursorSpan.classList.remove("typing");
    textArrayIndex++;
    if (textArrayIndex >= textArray.length) textArrayIndex = 0;
    setTimeout(type,typingDelay + 1100);
  }
}
document.addEventListener("DOMContentLoaded",newTextDelay + 250);
});

<div class="container" id="container">
  <h1>Savez-vous <span class="typed-text" id="typed-text"></span><span class="cursor" id="cursor">&nbsp;</span></h1>
</div>