Question

我正在购物车，但我遇到了一些问题。从来没有使用过图书馆我可能做错了，但是：

当我向购物车添加内容时，我有一个onclick函数expander(item)，如下所示：

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

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

问题是，clearTimeout（this.timer）不起作用。因此，对于每次点击，三秒后，无论我做什么，它都会将可见性设置为假。我正在尝试使用此功能的是每次重置计时器，在阅读之后，它似乎正在以正确的方式进行。

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

所以：我如何声明变量？甚至是我的问题？是否可能有一个比它试图做的更容易解决？

谢谢！

Answer 1

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

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

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

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

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

Answer 2

在按键之间等待1秒，
如果用户按键，清除setTimeout并用更多1秒更新setTimeout
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!');
    },
}

Answer 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。

vue.js中clearTimeout（）的问题

3 个答案: