加载长（非AJAX）函数的指标？

Question

我的 Vue 应用程序中有一个功能需要一些时间（大约 2-3 秒）才能完成。这是不是一个 AJAX 调用。

我想在此代码执行时包括一个加载指示器，但我无法完成它。我以为我可以做以下...

<div v-on:click="doThings()">{{stuff}}</div>

methods: {
    doThings: function () {

        this.loading = true
        console.log(this.loading)

        longFunction()

        this.loading = false
        console.log(this.loading)

    }...
}

...但这不起作用。 doThings() 似乎在 longFunction() 完成之前不执行任何操作。我什至尝试制作一个单独的功能并更改我的按钮以执行这样的两个功能...

<div v-on:click="doLoading(); doThings();">{{stuff}}</div>

...但这也是行不通的。我正在尝试做的事情可能吗？

Answer 1

对 longFunction() 使用异步代码，并在 Promise 解决后将 this.loading 设置为 false。

<div v-on:click="doThings()">{{stuff}}</div>

methods: {
    doThings: function () {
        this.loading = true
        longFunction().then(() => {
            this.loading = false
        })
    }
}

var longFunction = function() {
  return new Promise((resolve, reject) => {
     window.setTimeout(()=>{ //  force a new (pseudo)thread
         // do stuff, then
         resolve()
     },100); // ...some reasonably short interval. One millisecond is working for me when testing locally,  but it might be better to include some extra buffer, to ensure Vue is in its next tick
  });
}

或者，您可以传递一个对 longFunction 的对象引用，您的 Vue 组件可以 watch 进行更改，并将其用作返回组件的信号，它可以将 loading 设置为 false .

加载长（非AJAX）函数的指标？

Loading indicator for long (non-AJAX) function?

loading

vue.js

vuejs2