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