Question

按计划，应在处理progress_bar条之后调用getUsers（）函数，并且将关闭模式窗口。但实际上，在进度条仍在循环中运行时调用它。如何解决。

HttpsURLConnection

和进度条功能：

$("#progess-modal").modal('show');
            vm.progress=0;    
   this.progress_bar();
           axios.post('http://task.ru.xsph.ru/task.php',
                        'text='+this.text
                    )
                        .then(res => {
                            this.getUsers()
                            this.closeNav()
                        })
                        .catch(error => {
                            showModal:true
                            this.getUsers()
                        })

按计划，应在处理progress_bar条之后调用getUsers（）函数，并且将关闭模式窗口。但实际上，在进度条仍在循环中运行时调用它。如何解决。 https://stackoverflow.com/questions/ask

打开->附加任务

Answer 1

在JS中，所有语句都是同步的。默认情况下，它不等待诸如progress_bar（）之类的函数。而且，setInterval也是同步的。这意味着您的progress_bar（）函数不会等待设置的Interval完成返回。为此，您需要使progress_bar（）函数返回一个Promise。

progress_bar: function() {
    var vm = this   
    return new Promise(function(resolve,reject) {
        var width = 5
        $("#progess-modal").modal('show');
        vm.progress = 0;
        setInterval(function() {
            vm.progress += width;
            if (vm.progress >= 100) {
                $("#progess-modal").modal('hide');
                resolve();
            }
        }, 500)
    })
}

然后在主代码中

$("#progess-modal").modal('show');
vm.progress = 0;
var that = this;
this.progress_bar().then(function(res) {
    axios.post('http://task.ru.xsph.ru/task.php',
            'text=' + that.text
        )
        .then(res => {
            that.getUsers()
            that.closeNav()
        })
        .catch(error => {
            showModal: true
            that.getUsers()
        })
})

这可以确保仅当您实际要在setInterval（）内部返回时，才会返回progress_bar（）函数。解决承诺后，.then()便会运行

调用setInterval后函数的继续

1 个答案: