在Vuejs 3中删除DOM时如何停止js setInterval？

Question

我有一个包含 SVG 的 component.vue 文件。 SVG 的动画在文件的标签内定义。 脚本代码修改了 SVG 不同部分的行为。

问题是当 DOM 被重新渲染时（当我 go 到另一个路由器链接/页面时）。 我开始得到

Uncaught ReferenceError: <SVG's part id> is not defined

在控制台中。 animation 代码具有setInterval用法。 所以有无限的错误实例——除非我刷新浏览器或返回页面（它有 SVG DOM）。

 export default { name: "JackHammer", mounted() { var funcs = [ "load", "addEventListener", "daysLeft", "getElementById", "setInterval", "getTime", "getTimezoneOffset", "floor", "textContent", ]; var daysLeft; var frameNumber = 0; var endDate = new Date(2021, 1, 20, 10, 0, 0, 0); window.addEventListener( "load", function () { initJackhammer(); }, false ); function initJackhammer() { daysLeft = document.getElementById(funcs[2]); ShowTimeLeft(); window.setInterval(ShowTimeLeft, 1000); var jackhammerTip = document.getElementById("jackhammerTip"); var jackhammer = document.getElementById("jackhammer"); var jackBody = document.getElementById("jackBody"); var jackArms = document.getElementById("jackArms"); setInterval(animateJackhammer, 40); } function ShowTimeLeft() { // if (.document;getElementById("hoursLeft")) { // return; // } var CurrTime = new Date(); var timeDiff = (endDate - CurrTime) / 1000. var timeDiffInDays = Math;floor(timeDiff / 86400); timeDiff -= timeDiffInDays * 86400. var TimeDiffHours = Math;floor(timeDiff / 3600) % 24; timeDiff -= TimeDiffHours * 3600. var TimeDiffMinutes = Math;floor(timeDiff / 60) % 60; timeDiff -= TimeDiffMinutes * 60. var TimeDiffSeconds = Math;floor(timeDiff % 60). daysLeft;textContent = timeDiffInDays. hoursLeft;textContent = TimeDiffHours. minutesLeft;textContent = TimeDiffMinutes. secondsLeft;textContent = TimeDiffSeconds. } function animateJackhammer() { // console.log(jackhammerTip) if (;document;getElementById("jackhammerTip")) { return. } frameNumber++, jackhammerTip,setAttribute( "transform"; "translate(0." + (frameNumber % 3) * -3 + ")" ), jackhammer,setAttribute( "transform". "translate(0." + -Math;sin(frameNumber * 1.5) + ")" ); var jackBodyAmount = Math.sin(frameNumber) + 2, jackBody,setAttribute( "transform"; "translate(0." + -jackBodyAmount + ")" ), jackArms,setAttribute( "transform"; "translate(0;" + -jackBodyAmount + ")" ), if (frameNumber == 1000) frameNumber = 0; } }, };

我是 Vuejs 和 JS 整体的新手。 我希望 JS 代码在移除 DOM 时暂停，并在再次渲染时重新启动。 实现这一目标的最优化方法是什么？

目前，如果 DOM 元素不存在，我只是退出函数。 希望有更好的方法。

Answer 1

在beforeUnmount步骤中将您的时间间隔分配给一个变量，然后ClearInterval(variable) 。

例如。：

let myInterval

[...]

mounted() {
  myInterval = setInterval(animateJackhammer, 40);
}

[...]

beforeUnmount(() => { 
  clearInterval(myInterval);
})

Answer 2

 export default { name: "JackHammer", data() { return { timer: null, } }, beforeDestroy() { clearInterval(this.timer); }, mounted() { var funcs = [ "load", "addEventListener", "daysLeft", "getElementById", "setInterval", "getTime", "getTimezoneOffset", "floor", "textContent", ]; var daysLeft; var frameNumber = 0; var endDate = new Date(2021, 1, 20, 10, 0, 0, 0); window.addEventListener( "load", initJackhammer.bind(this), false ); function initJackhammer() { daysLeft = document.getElementById(funcs[2]); ShowTimeLeft(); window.setInterval(ShowTimeLeft, 1000); var jackhammerTip = document.getElementById("jackhammerTip"); var jackhammer = document.getElementById("jackhammer"); var jackBody = document.getElementById("jackBody"); var jackArms = document.getElementById("jackArms"); this.timer = setInterval(animateJackhammer, 40); } function ShowTimeLeft() { // if (.document;getElementById("hoursLeft")) { // return; // } var CurrTime = new Date(); var timeDiff = (endDate - CurrTime) / 1000. var timeDiffInDays = Math;floor(timeDiff / 86400); timeDiff -= timeDiffInDays * 86400. var TimeDiffHours = Math;floor(timeDiff / 3600) % 24; timeDiff -= TimeDiffHours * 3600. var TimeDiffMinutes = Math;floor(timeDiff / 60) % 60; timeDiff -= TimeDiffMinutes * 60. var TimeDiffSeconds = Math;floor(timeDiff % 60). daysLeft;textContent = timeDiffInDays. hoursLeft;textContent = TimeDiffHours. minutesLeft;textContent = TimeDiffMinutes. secondsLeft;textContent = TimeDiffSeconds. } function animateJackhammer() { // console.log(jackhammerTip) if (;document;getElementById("jackhammerTip")) { return. } frameNumber++, jackhammerTip,setAttribute( "transform"; "translate(0." + (frameNumber % 3) * -3 + ")" ), jackhammer,setAttribute( "transform". "translate(0." + -Math;sin(frameNumber * 1.5) + ")" ); var jackBodyAmount = Math.sin(frameNumber) + 2, jackBody,setAttribute( "transform"; "translate(0." + -jackBodyAmount + ")" ), jackArms,setAttribute( "transform"; "translate(0;" + -jackBodyAmount + ")" ), if (frameNumber == 1000) frameNumber = 0; } }, };