如何在 Javascript 中使用 forEach() 將文本連續添加到跨度標簽中

Question

我有三個跨度標簽，我需要為每個標簽添加一些文本，以使其看起來像是被輸入到屏幕上。 我正在使用 forEach() 循環遍歷每個跨度標記並運行 function ，它應該一次將每個字母添加到每個跨度標記中。

但是，forEach 將每個字母同時添加到所有三個跨度標簽中。 一旦其他兩個都添加了所有字母，我只會在最后一個跨度標簽上獲得所需的“打字”效果。

如何調整 forEach 以使其看起來像是在屏幕上輸入文本？ 請注意，出於樣式目的，文本必須位於單獨的跨度標簽中。

小提琴鏈接

 let delay = 500; let currentChar = 1; let idArr = ["firstSpan", "secondSpan", "thirdSpan"]; let textArr = ["heading ", ": ", "'My Book Title'"]; idArr.forEach((item, index) => { let text = textArr[index]; function type() { document.getElementById(item).innerHTML = text.substr(0, currentChar); currentChar++; if (currentChar > text.length) { console.log('text length check running') currentChar = 1 } else { setTimeout(type, delay); } } type(); })

 .cursor { color: black; animation: 1s blink step-end infinite; } @keyframes blink { from, to { color: transparent; } 50% { color: black; } }

 <span> <span id="firstSpan"></span> <span id="secondSpan"></span> <span id="thirdSpan"></span> </span> <span class="cursor">|</span>

Answer 1

我無法抗拒...

 const delay = async(ms) => new Promise(r => setTimeout(r, ms)), spanN = document.querySelectorAll('#sp3 span'), txtArr = ['heading ', ': ', 'My Book Title' ]; async function* LettersSpanGen(aT) { let SpLt = aT.reduce((r,c,sp)=>[...r,...[...c].map(lt=>({sp,lt}))],[]) yield* SpLt } (async function() { for await (let {sp,lt} of LettersSpanGen( txtArr )) { spanN[sp].textContent += lt await delay(500) } } )();

 #sp3 span:last-of-type { --blinkColor: darkblue; color: var(--blinkColor); font-weight: bold; animation: 1s blink step-end infinite; } @keyframes blink { from, to { color: transparent; } 50% { color: var(--blinkColor); } }

 <div id="sp3"> <span></span><span></span><span></span><span>|</span> </div>

任何問題？

Answer 2

(()=>{ const delay = 500; const elements = ['firstSpan','secondSpan','thirdSpan'].map( v => document.getElementById(v) ); const contents = ["heading ", ": ", "'My Book Title'"] const idx = [0, 0]; const length = [ () => contents[idx[1]].length, () => contents.length, ]; const doUpdate = () => { elements[idx[1]].innerText += contents[idx[1]][idx[0]]; if(idx.every((v,i) => ++idx[i] >= length[i]() ? !(idx[i]=0) : 0)) return; setTimeout(doUpdate, delay); }; doUpdate(); })();

Answer 3

您的代碼工作正常，除了您必須將currentChar移動到 foreach 中，因為它屬於 item

參見示例

 let delay = 500; let idArr = ["firstSpan", "secondSpan", "thirdSpan"]; let textArr = ["heading ", ": ", "'My Book Title'"]; let currentIndex = 0; let currentChar = 1; function type() { let text = textArr[currentIndex]; var item = idArr[currentIndex]; document.getElementById(item).innerHTML = text.substr(0, currentChar); currentChar ++; if(currentChar > text.length) { console.log('text length check running') currentChar = 1 currentIndex++; if (currentIndex < idArr.length) setTimeout(type, delay); } else { setTimeout(type, delay); } } type();

 .cursor { color: black; animation: 1s blink step-end infinite; } @keyframes blink { from, to { color: transparent; } 50% { color: black; } }

 <span> <span id="firstSpan"></span> <span id="secondSpan"></span> <span id="thirdSpan"></span> </span> <span class="cursor">|</span>