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

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

如何解决?

回复
阅读 2.8k
5 个回答
export default {
      methods: {
          //方法1
          a(){
              setInterval( ()=> {
                  this.b();  //---不执行报错:this.b() is not a function---
              },1000)
          },
          //方法2
          b(){
              console.log('调用成功')
          }
      }
}

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

this问题

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

第一种

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

第二种

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

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

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

你知道吗?

宣传栏