Question

我想使用一个变量，它在上次修改后的某个时间被丢弃（或无效）。这样的事情存在吗？

我的使用场景如下：websocket服务器将推送更新到Vue.js vm（基本上是一个变量），这将触发DOM的更改。我希望在最后一次修改后的某个时间内将此更改撤消（隐藏更新的元素）。

计划实施的重点是watch，它会更新上面vm变量的更改标记，并定期通过setInterval进行检查，然后会修改vm一旦标志到达某个时间，就触发隐藏。

虽然可行，但对我来说听起来并不是很聪明。

如果有一种方法可以将变量“淡出”到null，那么触发DOM元素可见性状态就会很简单。

有这样的机制吗？

Answer 1

我这样做的方法是使用timeout在给定的间隔后将show flag设置为false。最简单的解决方案是在data中声明您的计时器，以便在收到新的更新时将其清除并重新启动，您可以将其置于观察者中：

var vm = new Vue({
  el: '#app',
  watch: {
    myVar() {
      // Make sure we are showing the new value
      this.show = true;

      // Clear the timer because myVar has been updated
      clearTimeout(this.timer);

      this.timer = setTimeout(() => {
        this.show = false;
      }, 2000); // Now start the timer again
    }
  },
  data: {
    show: false,
    myVar: "",
    timer: ""
  }
});

这里是JSFiddle：https://jsfiddle.net/w4jjey2t/

是否存在volatile（时间限制）变量？

1 个答案: