使用 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)
   }
  },
 }

Answer 1

你的 sleep 方法阻塞了。

使函数异步。改用这个：

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

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

Update data in while loop using VueJS

methods

sleep

loops

function

vue.js