js定时器中如何调用函数？

Question

export default {
      methods: {
          //方法1
          a(){
              setInterval(function () {
                  this.b();  //---不执行报错：this.b() is not a function---
              },1000)
          },
          //方法2
          b(){
              console.log('调用成功')
          }
      }
}

如何解决？

Answer 1

export default {
      methods: {
          //方法1
          a(){
              setInterval( ()=> {
                  this.b();  //---不执行报错：this.b() is not a function---
              },1000)
          },
          //方法2
          b(){
              console.log('调用成功')
          }
      }
}

//内部function改变了this指向 用前头函数或者先声明一下this

Answer 2

this问题

a(){
      setInterval(function () {
          this.b();
      }.bind(this),1000)
  }

Answer 3

第一种

a(){
  setInterval(()=> {
      this.b();
  },1000)
  },

第二种

a(){
  let self = this;
  setInterval(function () {
      self.b(); 
  },1000)
  },

Answer 4

this的指向问题。
定时器中的this指向window对象而非vue实例，在window对象中你并没有定义b()方法，自然会报错。

Answer 5

把定时器回掉函数改成箭头函数，你的上下文不对。