javascript - 如何访问 vue.js 中 setInterval 函数外部的变量？

Question

如何从 setIntervall 方法内部访问 showOverlay？我从后端获取坐标，我希望这些坐标能够检查正确的节点，然后使用 vuetify 显示叠加层。

data: () => ({
    success: false,
    showOverlay: false,
    coordinates: {
      x: 0,
      y: 0
    },
    nodeArray: ['c', 'd', 'e', 'f', 'g', 'a', 'b','c_octave'],
    displayedNode: 'd',

  }),
    checkPosition(node) {
      var that = this;
      var intervalid = null;
      var varCounter = 0;
      var varName = function () {
        if(varCounter <= 10) {
          console.log(node)
          console.log(that.coordinates.x)
          varCounter ++;
          if(that.coordinates.x> 50) {
            console.log('inside')
            that.showOverlay = true;
            that.success = true;
            that.Sleep(2000)
            that.showOverlay = false;

...

          } else if((that.coordinates.x > 350 || that.coordinates.x < 400) && node === 'c_octave') {
            that.showOverlay = true;
            that.success = true;
            that.Sleep(2000)
            that.showOverlay = false;

          }
        } else {
          clearInterval(intervalid);
        }
      }
      setInterval(varName,1000);

    },
    Sleep(milliseconds) {
      return new Promise(resolve => setTimeout(resolve, milliseconds));
    },

Answer 1

更改函数以使用粗箭头来维护this的上下文:

var varName = () => {
  //..everything else
}