Question

我只有一张桌子。在页面加载时，此表将更新数据。创建表后，我需要类似于线程的东西，以便每隔几秒钟刷新一次。

目前，一旦通过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))
        }           

    }

Answer 1

让我们首先分析您的columnDefs={headerName: 'Action', field: 'actionElement', colId: 'params', cellStyle: {overflow: 'visible';}, cellRendererFramework: DropDownComponent} ];方法

asyncThread

您在这里所做的事情表明您对JavaScript引擎的工作原理缺乏了解：

JavaScript是单线程的。
async function asyncThread() { while (true) { console.log('loop started'); setTimeout(function () { console.log('sleep'); }, (3 * 1000)) } }方法返回一个隐含的promise，它们实际上并不是说异步的
您的while循环将无限期地运行，您的setTimeout函数将永远不会执行，因为只有当JavaScript引擎有时间执行其他操作时，这种情况才会发生（它无法执行，因为它被卡在while循环中）

通常，对于这些轮询请求，您将依靠async或setInterval。第一个将定期执行功能，直到调用setTimeout或页面被卸载为止，第二个将运行一次，除非在超时到期之前调用了clearInterval。

clearTimeout表示该函数将返回一个promise，您可以随后通过promise链进行处理，也可以通过其他async方法async成功完成< / p>

Answer 2

嗯，您有无限循环while (true) {...}阻塞了主线程。我想，您要找的是

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

JS异步功能停止页面加载

2 个答案: