javascript - setInterval() 是否重新评估函数的内容？

Question

我正在编写一个基于 Vue（特别是 Quasar 框架）的业余 SPA。

此应用程序在mounted()中连接到 MQTT 代理以获取一些信息（MQTT 在这里无关紧要 - 它可能是一个用 调用的 API fetch()，关键是结果在 JS 异步方式“一段时间后”可用）。此信息存储在this.results.

我this.results在某些组件中使用，内容按预期显示，并按预期更新新结果（即 中的更改this.results）。

由于这是家庭监控程序的前端，因此我还想显示上次获取结果的时间，并在一段时间内没有获得新结果时发出警报（这表明监控后端本身崩溃了）。我去了：

mounted() {
    // connect to the MQTT broker = new results will come. That could be a setInterval fetch()
    this.client = mqtt.connect("mqtt://mqtt.swtk.info:1884");
    this.client.on("connect", this.mqttConnect);
    this.client.on("message", this.mqttMessage);
    // check every 900 ms for the last time I got the results, and set a variable for the elapsed time
    setInterval(
      function() {
        console.log(this.results)
        this.timeSinceLastRun = moment().unix() - moment(this.results.when).unix()
      },
      900
    )
  }

这是我不断（每秒）在控制台上收到的消息：

同时，this.results 定义：不仅来自this.results的 cntents 以其他方式正确显示在组件中，而且在查看 DevTool Vue 选项卡时，我看到：

看起来函数this.result中的setInterval()仅评估一次并且是undefined- 这很好，因为当时还没有收到它，但很快就会设置（在获得第一个结果后）。

在对函数的每个 900 毫秒调用中，它的值不应该像“当前”那样使用吗？

标签： javascriptvue.jssettimeout

Answer 1

尝试使用() => {}这样的箭头功能

setInterval(
      () => {
        console.log(this.results)
        this.timeSinceLastRun = moment().unix() - moment(this.results.when).unix()
      },
      900
    )