所以我正在制作一个简单的文本动画，并决定制作它，这样一旦完成，你就可以重新启动它。问题是，我不确定有什么方法可以强制它在完成后重新启动onclick。按照我的方式，如果你点击屏幕，它可以也会在中间重新启动，这很好，但它会继续打印以前的一些文本。不管怎样，这是我的代码
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1 id=typing-style></h1>
<script>
var i=0,text="Mitchell";
setInterval(()=>{
document.getElementById("typing-style").innerHTML += text.charAt(i);
i++;
},300)
function rerun() {
document.getElementById("typing-style").innerHTML = " ";
var i=0,text="Mitchell";
setInterval(()=>{
document.getElementById("typing-style").innerHTML += text.charAt(i);
i++;
},300)
}
</script>
<canvas id="screen" onclick="rerun()" width=1000% height=1000%></canvas>
</body>
</html>
所以我一直在努力让它在点击屏幕时能够重新启动，但停止当前进程。希望有人能弄清楚。
此代码从不调用clearInterval，因此两个计时器将同时运行，相互交流文本操作。代码重复是不必要的——在函数中只写一次代码更容易，然后在每次需要运行逻辑时调用函数。
对于这类事情，我会创建一个闭包来封装创建计时器所需的数据：interval和index。您可以返回一个计时器启动函数，该函数处理重置计时器状态，并且可以在事件侦听器中调用(首选onclick，因为它将行为排除在标记之外；阅读更多(。
最后，优选textContent或innerText而不是innerHTML。如果内容纯粹是基于文本的，那么它们会更快、更安全、语义更合适。
const makeTextTyper = (el, text, speed) => {
let i;
let interval;
return () => {
clearInterval(interval);
el.innerText = "";
i = 0;
interval = setInterval(() => {
if (i < text.length) {
el.innerText += text[i++];
}
else {
clearInterval(interval);
}
}, speed)
};
};
const buttonEl = document.querySelector("button");
const typerEl = document.querySelector("h3");
const runTyper = makeTextTyper(typerEl, "Mitchell", 300);
buttonEl.addEventListener("click", runTyper);
runTyper();<button>restart</button>
<h3></h3>当重新运行函数被调用时，需要取消现有的间隔，这可以使用clearInterval方法来实现。
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1 id="typing-style"></h1>
<script>
var i = 0, text = "Mitchell";
var interval;
interval = setInterval(()=>{
document.getElementById("typing-style").innerHTML += text.charAt(i);
i++;
},300)
function rerun() {
clearInterval(interval);
document.getElementById("typing-style").innerHTML = " ";
var i=0,text="Mitchell";
interval = setInterval(()=>{
document.getElementById("typing-style").innerHTML += text.charAt(i);
i++;
},300)
}
</script>
<canvas height="1000%" id="screen" onclick="rerun()" width="1000%"></canvas>
</body>
</html>我会在重新运行函数中写一个if语句来确定动画是否完成。您可以使用.length方法来确定文本是否已完成。
var typingText = document.getElementById("typing-style")
if(typingText.length === 8) //length of Mitchell {
document.getElementById("typing-style").innerHTML = " ";
var i=0,text="Mitchell";
setInterval(()=>{
document.getElementById("typing-style").innerHTML += text.charAt(i);
i++;
}
},300)
} ```