vue.js 中 clearTimeout() 的问题

Question

我正在用 vue 做一个购物车，但我遇到了一些问题。从未使用过该库，我可能做错了基础知识，但是：

当我向购物车添加东西时，我有一个 onclick 函数 expander(item) 看起来像这样：

 this.addToCart(item);
this.show = true;
clearTimeout(this.timer);
timer: setTimeout(()=>{ this.show = false; }, 3000);

所以它会添加到购物车，将购物车 div 的可见性设置为 true，然后在延迟三秒后将购物车 div 设置回 false。

问题是，clearTimeout(this.timer) 不起作用。所以对于每次点击，三秒钟后，无论我做什么，它都会将可见性设置回 false。我想用这个功能做的是每次都重置计时器，在阅读之后，我似乎正在以正确的方式进行操作。

所以，我猜我的问题是我需要在函数之外声明变量 timer: setTimeout(()=>{ this.show = false; }, 3000); 以便 clearTimeout() 在我的函数开头找到它。我的问题是，无论我在哪里声明，它似乎都找不到。我已经尝试在我的 data {} 以及 Vue 实例之外声明变量，但它似乎不想在我的函数中找到它。

所以：我该如何声明变量？这甚至是我的问题吗？是否有比它试图做的更容易解决这个问题的方法？

谢谢！

原文由 user7699223 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在引用的代码中，这一行：

 timer: setTimeout(()=>{ this.show = false; }, 3000);

定义一个带 标签的语句，并且不在任何地方保存定时器句柄。要将其保存到 this.timer ，您需要使用赋值：

 this.timer = setTimeout(()=>{ this.show = false; }, 3000);

（ timer: 事物将分配给对象初始值设定项 [ { ... } ] 内的属性，但不会分配给对象初始值设定项之外的属性。）

原文由 T.J. Crowder 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

• setTimeout 生成一个id
• 在变量中捕获此 id
• 将此变量传递给 clearTimeout

根据 MDN：返回的 timeoutID 是一个正整数值，用于标识调用 setTimeout() 创建的计时器；该值可以传递给 clearTimeout() 以取消超时。

在 Vuejs 中，以下步骤对我有用。

 data: {
myToid:null,
}, ....

methods: {
 myTofunction: function(){
    clearTimeout(this.myToid);
    this.myToid = setTimeout(() => {
        ...my function code...;
    }, 6000);
 }
}

每当我调用 myTofunction 时，它首先清除任何现有的 setTimeout id（存储在 myToid 中），然后设置一个新的 id。

原文由 Govind 发布，翻译遵循 CC BY-SA 4.0 许可协议