JS异步函数停止页面加载

Posted 2021-03-31

我有一个表格的单页。在页面加载时，此表将更新数据。一旦创建了表，我就需要类似于线程的东西，这样每隔几秒钟就可以刷新一次。

此时，一旦在ajax调用上获取数据。如果我调用asyncThread（）表没有在页面上加载，则UI挂起并停留在循环中。如何在调用asyncThread（）函数时阻止UI挂起？

 $.ajax({
                url: 'xxxxxxxxx',
                contentType: 'application/html ; charset:utf-8',
                type: 'GET'
            }).success(function (result) {
                $('#table')
                    .DataTable(
                        {
                            paging: false,
                            "ordering": false,
                            "language": {
                                "decimal": ",",
                                "thousands": "."
                            },
                            searching: false,
                            "scrollCollapse": true,
                            "scrollY": "75vh"
                        });
                asyncThread();
            }).error(function () {

            });

.

    async function asyncThread() {
        while (true) {
            console.log('loop started');
            setTimeout(function () {
                console.log('sleep');
            }, (3 * 1000))
        }           

    }

答案

让我们首先分析你的asyncThread方法

async function asyncThread() {
    while (true) {
        console.log('loop started');
        setTimeout(function () {
            console.log('sleep');
        }, (3 * 1000))
    }           

}

你在这做什么，表明你不了解javascript引擎的工作原理：

• JavaScript是单线程的。
• async方法返回一个隐含的承诺，它们并不真正按照说法运行异步
• 你的while循环将无限期地运行，你的setTimeout函数将永远不会被执行，因为这只会在你的JavaScript引擎有时间执行其他东西时发生（它不能，因为它在你的while循环中停留）

通常，对于这些轮询请求，您将依赖setInterval或setTimeout。第一个将周期性地执行一个函数，直到调用clearInterval或页面被卸载，第二个将运行一次，除非在超时到期之前调用clearTimeout。

async表示该函数将返回一个promise，然后你可以通过promise链处理，或者从不同的async方法处理，你可以await成功完成

另一答案

好吧，你有无限循环while (true) {...}阻塞主线程。我想，你在寻找的是什么

function asyncThread() {
    console.log('loop started');
    setTimeout(() => {
        console.log('sleep');
        asyncThread();
    }, 3000)
}