typewriting 강의를 들으며 settimeout 이벤트를 만드는데요.

[윤서준]

typewriting 강의를 들으며 settimeout 이벤트를 만들고 있습니다.
그런데 settimeout이 돌아가는 도중에 다시 버튼을 클릭하면 settimeout 두 개가 섞여서 나오는 버그가 발생해서 구글 검색으로 clearTimeout이란 이벤트를 사용했는데 작동이 잘 되지를 않습니다. 어떻게 수정하면 진행되던 settimeout을 초기화 시키고 새로 작동시킬 수 있을까요?'

let h1태그 = document.querySelector("h1");
let 원래글씨 = document.querySelector("h1").innerHTML;

$(".btn").click(function () {
timer();
h1태그.innerHTML = " ";

for (let i = 0; i < 원래글씨.length; i++) {
var timeout = setTimeout(function () {
h1태그.innerHTML =
h1태그.innerHTML + 원래글씨[i]
}, (i + 1) * 1000);
}
function timer() {
clearTimeout(timeout);
}

[codingapple]

var timeout을 이벤트리스너 바깥에 먼저 만들어놓고 setTimeout을 나중에 집어넣어봅시다 

[윤서준]

수정해 보았는데 아무래도 클릭시점에 setTimeout 3개가 동시에 작동하는 건지 중지가 되지 않더군요.
그래서 다음과 같이 setInterval 로 바꾸니까 작동이 되었습니다!

let h1태그 = document.querySelector("h1");
let 원래글씨 = document.querySelector("h1").innerHTML;
var timeout = 0;

$(".btn").click(function () {
clearInterval(timeout);
h1태그.innerHTML = " ";

var index = 0;
timeout = setInterval(function () {

h1태그.innerHTML = h1태그.innerHTML + 원래글씨[index++];
if (index == 원래글씨.length) {
clearInterval(timeout);
}
}, 1000);

});

[글쓴이]

글