vue.js 中 clearTimeout() 的问题答案

【问题标题】：problems with clearTimeout() in vue.jsvue.js 中 clearTimeout() 的问题
【发布时间】：2017-08-03 05:00:30
【问题描述】：

我在 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 实例之外声明变量，但它似乎不想在我的函数中找到它。

so：如何声明变量？这甚至是我的问题吗？有没有比它尝试做的更容易解决这个问题的方法？

谢谢！

【问题讨论】：

你能做一个小提琴吗？

标签： javascript vue.js

【解决方案1】：

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

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

定义一个labelled statement，并且不会将计时器句柄保存在任何地方。要将其保存到 this.timer，您需要使用赋值：

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

（timer: 事物将分配给对象初始化程序 [{ ... }] 内的属性，但不在一个之外。）

【讨论】：

谢谢。它现在适用于我所有不同的功能！虽然 - 我的最后一个小问题是当我将鼠标悬停在 div 上时我想清除Timeout(this.timer)，以便在鼠标悬停时保持购物车可见。我有一个v-on:mouseleave="addTimeout()" 可以工作——它是一个增加超时的函数。但我的v-on:mouseover="clearTimeout(this.timer)" 似乎根本不想工作。这是一个问题，因为它不是全局变量，还是我错过了什么？我一直在阅读文档，但在那里找不到我的问题...
@akre_11：恐怕我不知道 Vue。我怀疑问题在于this 没有指代您期望它指代的内容，但除此之外，恐怕我无法解决这个后续问题。
好吧！非常感谢您的帮助，它使我朝着正确的方向前进。我会继续解决这个问题！

【解决方案2】：

在按键之间等待 1 秒，
如果用户按键，清除 setTimeout 并更新 setTimeout 超过 1 秒
1 秒后，用户不要在 setTimeout 过期前按下按键并调用另一个函数（VueJs 中的方法）
列表项

我使用了这个解决方案，它是在调用 api 之前验证用户是否结束单词：

data: {
    search: '',
    time:null,
    },
watch: {
    search: function (search) {
        var self = this;
        console.log('Search keypress: ' + search);
        if (search.length >= 3) {
            if (this.time) {
                clearTimeout(this.time);
            }
            this.time = setTimeout( () => this.searchOnline(search), 1000);
            console.log('Search online or wait user finish word?');
        }
    },
},
methods:{
    searchOnline: function(search){
        console.log('Start search online: ' + search);
        // axios call api search endpoint
        console.log('Serch online finished!');
    },
}

【讨论】：

不知何故这并没有为我清除计时器。你确定 clearTimeout 在处理这样的局部变量时有效吗？

【解决方案3】：

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。

【讨论】：