시간 간격에 따른 자바 스크립트 루핑

Question

필자는 JavaScript로 타이포그래피 효과를주는 스크립트입니다. 루프를 실행하려고 했으므로 실행이 끝난 후 10 초가 지나면 루프에서 실행됩니다. 즉, 타이핑 효과가 있고 10 초 후에 텍스트가 쓰여지면 다시 한 번 실행됩니다. 나는 setTimeout()으로 시도했지만 작동하지 않았습니다.

미리 도움을 주셔서 감사합니다.

function setupTypewriter(t) { 
    var HTML = t.innerHTML; 

    t.innerHTML = ""; 

    var cursorPosition = 0, 
     tag = "", 
     writingTag = false, 
     tagOpen = false, 
     typeSpeed = 50, 
     tempTypeSpeed = 0; 

    var type = function() { 

    if (writingTag === true) { 
     tag += HTML[cursorPosition]; 
    } 

    if (HTML[cursorPosition] === "<") { 
     tempTypeSpeed = 0; 
     if (tagOpen) { 
     tagOpen = false; 
     writingTag = true; 
     } else { 
     tag = ""; 
     tagOpen = true; 
     writingTag = true; 
     tag += HTML[cursorPosition]; 
     } 
    } 
    if (!writingTag && tagOpen) { 
     tag.innerHTML += HTML[cursorPosition]; 
    } 
    if (!writingTag && !tagOpen) { 
     if (HTML[cursorPosition] === " ") { 
     tempTypeSpeed = 0; 
     } 
     else { 
     tempTypeSpeed = (Math.random() * typeSpeed) + 50; 
     } 
     t.innerHTML += HTML[cursorPosition]; 
    } 
    if (writingTag === true && HTML[cursorPosition] === ">") { 
     tempTypeSpeed = (Math.random() * typeSpeed) + 50; 
     writingTag = false; 
     if (tagOpen) { 
     var newSpan = document.createElement("span"); 
     t.appendChild(newSpan); 
     newSpan.innerHTML = tag; 
     tag = newSpan.firstChild; 
     } 
    } 

    cursorPosition += 1; 
    if (cursorPosition < HTML.length - 1) { 
     setTimeout(type, tempTypeSpeed); 
    } 

    }; 

    return { 
    type: type 
    }; 
} 

var typer = document.getElementById('typewriter'); 

typewriter = setupTypewriter(typewriter); 

typewriter.type(); 

Answer 1

원하는 경우 setInterval.

setInterval (function() {alert ("Hello");});

이 코드는 3 초마다 실행됩니다.

전체 문서 (을 중지하는 방법 포함) 여기 등 예 :

https://www.w3schools.com/jsref/met_win_setinterval.asp

Answer 2

typewriter = setupTypewriter(typewriter); 

당신은 setupTypewriter-typewriter 변수를 전달하지만, 아직 존재하지 않습니다. 여기 BTW, 난 당신이 태그를 인쇄하는 방법을 이해할 수 없다

typewriter = setupTypewriter(typer); 

---

를 사용하고 싶습니다. 0을 지연시키면서 <, d, i, v, >을 인쇄하지만 파서가 여전히 손상 될 수 있습니다. 한 번에 태그를 인쇄 한 다음 div의 내용을 추가하십시오. <div></div>.