JS异步功能停止页面加载

Question

I have a single page with a table. On Page load this table will get updated with data. I need something resembling a thread once table is created so that is can be refreshed every few seconds.

At the moment once the data is fetched on ajax call. If i call asyncThread() the table doesnt load on the page, the UI is hung and stuck in a loop. How do i prevent the UI hanging when calling the asyncThread() function ?

 $.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

Let's first analyze your asyncThread method

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

}

What you are doing here, shows that you lack the understanding of how the JavaScript engine works:

• JavaScript is single threaded.
• async methods return an implicit promise, they don't really run asynchronous per say
• Your while loop will run indefinitely, your setTimeout function will never be executed, as this would only happen when you the JavaScript engine gets time to execute something else (which it can't, as it is stuck in your while loop)

Typically, for these polling requests, you would rely on setInterval or setTimeout . The first will periodically execute a function until clearInterval is called or the page is unloaded, the second will run once unless clearTimeout was called before the timeout expires.

async denotes that the function will give back a promise, which you could then handle through the promise chain, or from a different async method, you could await its successful completion

Answer 2

Well, you have infinite loop while (true) {...} which is blocking main thread. I think, what you looking for is

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