美文网首页
vue中requestAnimationFrame简单使用

vue中requestAnimationFrame简单使用

作者: LemonTree7 | 来源:发表于2020-07-17 09:51 被阅读0次
<script>

/*#region 导入函数*/
/*#endregion*/

export default {
  name: "Main",
  methods: {

    /*#region 自定义函数(组件change事件等)*/
    //开始轮询
    async start() {
      const f = async () => {
        //具体需要轮询的方法在此编辑
        console.log("测试-:", date.format("hh:mm:ss", new Date()));
        clearTimeout(this.interval);
        this.interval = setTimeout(() => {
          this.animationFrameID = requestAnimationFrame(f);
        }, this.times);
      };
      if(!this.animationFrameID){
              this.animationFrameID = requestAnimationFrame(f);
      }
      return true;
    },
    //注销轮询
    end() {
      clearInterval(this.interval);
      cancelAnimationFrame(this.animationFrameID);
    }

     /*#endregion*/

  },

  /*#region 生命周期函数(created、mount、等)*/
  async created() {
    this.start();
  },
  destroyed() {
    this.end();
  },

  /*#endregion*/

  /*#region 注册绑定数据*/
  data() {
    return {
      interval: null,
      times: 2000,
      animationFrameID: null
    }
  }

  /*#endregion */

}
</script>

相关文章

网友评论

      本文标题:vue中requestAnimationFrame简单使用

      本文链接:https://www.haomeiwen.com/subject/pbbwhktx.html