从 vueJS 方法调用 setTimeout() 不起作用答案

【问题标题】：setTimeout() not working called from vueJS method从 vueJS 方法调用 setTimeout() 不起作用
【发布时间】：2017-12-31 05:57:09
【问题描述】：

我正在尝试允许用户从应用程序重置或关闭给定服务器。我现在正在处理界面，并希望向用户提供有关正在发生的事情的消息。我显示在我的数据对象中定义的消息以指示所采取的操作。然后我使用 setTimeout 切换重置....消息和重置消息。看下面的方法。

    systemReset: function(){
            this.message = this.server + ': Resetting';
            setTimeout(function(){
                this.message = this.server + ': Reset';
            }, 2000);

    }

在我的浏览器中，我可以触发此消息并显示“重置”消息，但永远不会输出以下“重置”消息。我有任何格式错误吗？

把这个方法放在上下文中是我的整个组件。

  <template>
    <div>
      <p>{{message}}</p>
      <button @click="systemReset">Reset Server</button>
      <button @click="systemPowerDown">Poweroff Server</button>
    </div>
  </template>

  <script type="text/javascript">
    export default{
      data: function(){
        return{
          message: ''
        }
      },
      methods: {
        systemPowerDown: function(){
            this.message = this.server + ': Server Down';
        },
        systemReset: function(){
            this.message = this.server + ': Resetting';
            setTimeout(function(){
                this.message = this.server + ': Reset';
            }, 2000);
         }
      },
      props: ['server']
    }
  </script>

Am I missing something obvious?  Or is there some vue limitation I am unaware of?

【问题讨论】：

this.message 是一个字符串，你如何以及何时显示它？
难道是在timeout函数中使用this关键字，所以指的是timeout函数而不是systemReset？
我在我的段落中输出它
但只有一次..？
@PatrickMcDermott 也许，会发生这种情况吗？

标签： javascript methods vue.js

【解决方案1】：

this 的值在setTimeout 内部是不同的。

如果你使用的是 ES6，你可以使用箭头函数：

setTimeout(() => { this.message = this.server + ': Reset' }, 2000)

或者如果你不是，你可以绑定this的值：

setTimeout(function () {
  this.message = this.server + ': Reset'
}.bind(this))

但是，我从未使用过 Vue，我不知道当您更改 this.message 的值时它是否会重新渲染，或者您是否应该更改某些组件状态或其他内容。

【讨论】：

如果有人好奇，Vue 确实知道在使用 bind(this) 时值发生变化时重新渲染。
你是救世主。 bind(this) 就是全部。非常感谢

【解决方案2】：

因为您在 setTimeout 中，所以 this 与您的 Vue 实例不对应。你可以改用self：

systemReset: function(){
    this.message = this.server + ': Resetting';
    var self = this;
    setTimeout(function(){
        self.message = self.server + ': Reset';
    }, 2000);
}

【讨论】：

【解决方案3】：

可以解决将this 存储在超时函数之外的变量中吗？

像这样：

 systemReset: function(){
            var $this = this;
            $this.message = this.server + ': Resetting';
            setTimeout(function(){
                $this.message = this.server + ': Reset';
            }, 2000);
         }

这样做指的是正确的函数systemReset

【讨论】：

【解决方案4】：

我遇到了一个熟悉的问题。所以解决方案是创建一个改变变量的函数（在“方法”中）。然后从 'setInterval' 我调用了这个方法（this.methodname）。

【讨论】：

【解决方案5】：

如果没有帮助，请使用 $forceUpdate()。

this 到 setTimeout() 的适当段落在 JSFiddle 中工作正常 https://jsfiddle.net/BeloglazovRL/owL94phz/ (Vue 2.6.14)。但它不适用于我使用 Vue 2.6.13 的 Web 应用程序。

致电 Vue this.$forceUpdate(); 帮助我定期调用 setTimeout()。

我已经厌倦了所有其他答案：将 this 保存到 self、箭头函数和显式绑定。调试输出打印更改变量并使用 Vue 内部内容纠正 this，但屏幕上没有任何变化。它仅在计时器结束后更改。我尝试将超时设置为 5 秒而不是 1 秒。它也没有帮助。然后我决定强制更新。例如：Can you force Vue.js to reload/re-render?

它帮助我解决了问题。所以你必须使用这样的代码：

myTimer() {

  ... //Change text, e.g.: %, timer and so on. Check condition for halt.

  this.vueTextVar = newTextValue;
  this.$forceUpdate();
  setTimeout(() => {
          this.myTimer();
        }, 1000);
}

【讨论】：