Question

我对Vue很陌生。这使我感到困惑。

如果我在方法内部有这个while循环。

methods: {
  test: function() {
    counter = 0;
    while( counter < 10 ){
      console.log( counter );
      counter++;
      window.setTimeout( function() {
        console.log( 'Test' );
      }, 1000)
    }
  }
},
mounted() {
  this.test();
}

然后在我的控制台中，将打印以下内容：

如果我错了，请更正我，但不应该这样写：

0
Test
1
Test
2
Test
3
Test
4
Test
5
Test
6
Test
7
Test
8
Test
9
Test

...并且之间有几秒钟的延迟吗？

我问的原因是我要从API中提取数据，并且-仅想在填充数据后初始化函数。

This post，建议对setTimeout使用箭头功能，但这样做时看不到任何区别。

我对Vue's lifecycle进行了很多研究，但这也没有给我答案。

Answer 1

在while循环中计数非常快（<1秒），因此，在超时执行完毕之前，您的while循环的其余部分已经执行（打印0到9），之后您的超时达到其倒计时并打印连续进行“测试”。这样一来，该命令将被依次打印10次，而在控制台中将其缩写为（10）而不是按字面意义打印10次。

之所以会发生这种情况，是因为当您调用function* iterRight(array) { var i = array.length; while (i--) yield array[i]; } const versions = [{ version: 1, data: {} }, { version: 3, data: {} }, { version: 17, data: {} }, { version: 95, data: {} }]; var item; for (item of iterRight(versions)) { if (item.version <= 16) break; } console.log(item);时，此处调用的代码将在x毫秒后并行执行，因此，在超时递减计数的同时，其余代码将继续处理。

如果您希望得到期望的结果，则应直接执行它，而不要使用超时：

window.setTimeout

如果要在每个数字之间等待1秒，则应使用递归函数，如下所示：

methods: {
  test: function() {
    counter = 0;
    while( counter < 10 ){
      console.log( counter );
      counter++;
      console.log( 'Test' );
    }
  }
},
mounted() {
  this.test();
}

请确保为此使用初始值或默认值test(0); function test (counter) { if (counter < 10) { console.log( counter ); counter++; console.log( 'Test' ); window.setTimeout( function() { test(counter); }, 1000) } }

Answer 2

最好使用Promise。应该修改 getApi 函数，并读取API并使用Promise并行执行它，因此一旦加载完成，我会先调用 then ...

methods: {
  test: function() {
    this.getAPI().then((data) => {
       // here is the API load finished | data === 'example data' 
    });
  },
  getAPI: function(){
    // change this
    return new Promise((resolve) => {
      resolve('example data');
    });
  }

},
mounted() {
  this.test();
}

使用setTimeout了解Vue中的while循环

2 个答案: