function - 使用 VueJS 在 while 循环中更新数据

Question

所以我想要的只是在一个方法中使用一个while循环来改变这个对象，我从一个按钮事件中调用它。我唯一的问题是，当我在循环中递增它时， cameraPosition数据不会改变，它只会在函数结束时改变值。

任何帮助将非常感激！

data() {
  return {
    cameraPosition: { x: 0, y: 0, z: -60 }
  methods: {
    sleep(milliseconds) {
     const date = Date.now();
     let currentDate = null;
     do {
       currentDate = Date.now();
     } while (currentDate - date < milliseconds);
    },

   animation(destinationPos) {
     while (this.cameraPosition.z < destinationPos.z) {
       this.cameraPosition.z = this.cameraPosition.z + 1;
       sleep(200)
   }
  },
 }

标签： functionloopsvue.jsmethodssleep

Answer 1

你的睡眠方法是阻塞的。

使函数异步。改用这个：

   async animation(destinationPos) {
     while (this.cameraPosition.z < destinationPos.z) {
       this.cameraPosition.z = this.cameraPosition.z + 1;
       await new Promise(r => setTimeout(r, 2000));
   }

https://stackoverflow.com/a/39914235/5671919