Javascript 如何使用异步函数在函数结束前加载页面

我在一个函数中计算数据，该函数在两个不同的json文件上循环，但即使在函数前面有async标记，如果函数没有完成所有数据的计算，我的前端仍将被加载

所以我想知道，有没有一种完全异步的方法？ 还是在这种情况下就不可能了

到目前为止，我尝试的是：

JS部分

mounted() {
        // Count line inside appsession.json
        this.findMatch()
        },


... Inside Methods :


    async findMatch(){
            var result=[]
        this.loading=true
        var x=0
        var z=0

        console.log('test:',Object.keys(this.session).length)
        var l=Object.keys(this.session).length
        for(var i in this.session)
            {

               this.percentage=((i/l)*100)
                //console.log((i*Object.keys(this.session).length)*100)
                for(var y in this.users)
                {
                    if(this.session[i]._source.deviceID==this.users[y].device_id){
                        result.push(this.session[i]._source.deviceID)
                        if(this.session[i]._source.deviceOS=="ios"){
                            this.ios=this.ios+1
                        }
                        else if(this.session[i]._source.deviceOS=="android"){
                            this.android=this.android+1
                        }
                    }
                }
            }
        this.InitPieChartMobiles()
        this.loading=false
      },

loading : {{ percentage }}%
        <template>
        <div v-if="loading">
            <div class="lds-hourglass"></div>
        </div>
        <div class="small">
            <line-chart :chart-data="datacollection"></line-chart>
        </div>
         <div class="small">
            <pie-chart :chart-data="usercollection"></pie-chart>
        </div>
        <div class="small">
            <pie-chart :chart-data="mobiles"></pie-chart>
        </div>
        </template>

前端部件：

mounted() {
        // Count line inside appsession.json
        this.findMatch()
        },


... Inside Methods :


    async findMatch(){
            var result=[]
        this.loading=true
        var x=0
        var z=0

        console.log('test:',Object.keys(this.session).length)
        var l=Object.keys(this.session).length
        for(var i in this.session)
            {

               this.percentage=((i/l)*100)
                //console.log((i*Object.keys(this.session).length)*100)
                for(var y in this.users)
                {
                    if(this.session[i]._source.deviceID==this.users[y].device_id){
                        result.push(this.session[i]._source.deviceID)
                        if(this.session[i]._source.deviceOS=="ios"){
                            this.ios=this.ios+1
                        }
                        else if(this.session[i]._source.deviceOS=="android"){
                            this.android=this.android+1
                        }
                    }
                }
            }
        this.InitPieChartMobiles()
        this.loading=false
      },

loading : {{ percentage }}%
        <template>
        <div v-if="loading">
            <div class="lds-hourglass"></div>
        </div>
        <div class="small">
            <line-chart :chart-data="datacollection"></line-chart>
        </div>
         <div class="small">
            <pie-chart :chart-data="usercollection"></pie-chart>
        </div>
        <div class="small">
            <pie-chart :chart-data="mobiles"></pie-chart>
        </div>
        </template>

加载：{{percentage}}%

我想有办法做到这一点，因为我已经使用了可以显示v-if是否为真的组件。但我不能指出该做什么或如何做

---

谢谢你抽出时间

在任何函数之前添加

async

，都不会使其耗尽主js线程。它只是让函数返回一个promise，加载页面的另一部分时可以使用

setTimeout

。即使这将在主线程上运行，但它将在调用堆栈为空后运行，即会延迟执行您的函数。我会尝试一下，感谢您提供的信息“如果函数未完成（…），我的前端仍将加载”。好的，是的，你在方法的一开始就设置了

this.loading=true

：）我不明白你到底有什么问题-据我所知，你需要这个加载，因为可见的数据将取决于你所做的计算？我将删除加载变量，它与当前问题无关，它只是一个布尔变量，我在加载屏幕上使用它，在任何函数没有用完主js线程之前添加

async

。它只是让函数返回一个promise，加载页面的另一部分时可以使用

setTimeout

。即使这将在主线程上运行，但它将在调用堆栈为空后运行，即会延迟执行您的函数。我会尝试一下，感谢您提供的信息“如果函数未完成（…），我的前端仍将加载”。好的，是的，你在方法的一开始就设置了

this.loading=true

：）我不明白你到底有什么问题-据我所知，你需要这个加载，因为可见的数据将取决于你所做的计算？我将删除加载变量，它与当前问题无关，它只是一个用于加载屏幕的布尔变量