setTimeout不适用于vue.js应用程序

Question

我有一个函数，在页面加载1秒后启动，在本地开发阶段它可以工作，但当我构建应用程序并将其放在服务器上时，超时不再工作(在chrome上，它只有在接受cookie的横幅并重新加载页面后才能工作(，而如果我进入隐身模式，它就不工作。

这是超时代码：

window.setTimeout(() => {       
this.brake();     
},1000);

这是一个vue.js应用程序。

我试图通过插入以下代码来修改函数：

document.addEventListener('DOMContentLoaded', function() {
window.setTimeout(() => {
this.brake();
},1000);
}, false);

但它仍然不起作用。

测试站点的链接是：https://new.carbobrake.com/

页面加载完成后，磁盘应自行停止，但这种情况不会发生。

----编辑----

这是我的代码：

<div id="animation-container">
<img id="fixed-canvas-container" :src="this.homeImages[0]" alt="" />
<img id="scroll-canvas-container" :src="this.animationImages[0]" alt="" />


<div id="step0">
// other code
</div>
</div>

Javascript：

methods: {
brake() {
this.canvasContainer = document.getElementById("fixed-canvas-container");
this.canvasContainer.src = this.homeImages[1];
setTimeout(() => {
document.body.style.overflowY = "visible";
this.setImageMargin();
document.getElementById("scroll-canvas-container").style.display =
"block";
var step0 = document.getElementById("step0");
TweenMax.fromTo(
step0,
0.5,
{
display: "none",
opacity: 0,
},
{
display: "block",
opacity: 1,
ease: Power3.easeIn,
}
);
}, 1100);
// TODO check
setTimeout(() => {
this.canvasContainer.style.display = "none";
},2500);
}
}, 
mounted() {
window.setTimeout(() => {
this.brake();
}, 1000);

}

Answer 1

我这样解决了它：

window.addEventListener('load', this.brake);

现在，它在页面加载结束时可以正常工作。