setInterval не выполняется должным образом, если вы не взаимодействуете с DOM - PullRequest
0 голосов
/ 29 марта 2020

enter image description here

Проверьте GIF, который я разместил выше для демонстрации проблемы.

Во время загрузки страницы у меня есть ajax запросить выборку данных с сервера, который будет использоваться для заполнения таблицы DataTables . Способ, которым я вставляю данные, заключается в том, что я переключаюсь на каждую строку данных, которую я выбрал, и затем выполняю setInterval, чтобы вставка данных была разнесена каждые 20 мс. Я сделал это, потому что я буду планировать выполнение запроса ajax каждые 10 секунд (я буду расширять его в зависимости от того, как долго выполняется последняя строка; я не буду иметь дело с данными более тысячи строк) , чтобы у меня всегда были свежие обновленные данные, и чтобы их интервал не отставал, браузер почти на секунду задерживается каждый раз, когда выполняется запрос ajax.

Я заметил, что во время загрузки страницы функции setInterval выполнить правильно или своевременно (я сделал простой консольный журнал, чтобы проверить скорость выполнения setInterval), но по какой-то причине DOM отстает, если я не взаимодействую с DOM, как это видно в GIF. Может кто-нибудь пролить свет на то, почему это так, и есть ли способ «принудительно обновить» DOM?

Примечание: я проверил свои исследования, и наличие сотен setInterval не сильно влияет на производительность, основываясь на этом вопрос: сколько javascript вызовов setTimeout / setInterval можно установить одновременно на одной странице?

Вот фрагмент кода:

function updateStock() {
    $.ajax({
        data: {},
        dataType: 'json',
        method: 'POST',
        timeout: 3000,
        url: '/ajax/stock/getstock/'
    }).done(function (data) {
        var das,dat,t,toutmax = 1,upd;

        for (const ind in data.stock) {
            if (data.stock.hasOwnProperty(ind)) {

                setTimeout(function () {
                    if(0) { //dont mind this~
                        //data table is updated here
                    } else {
                        t = $(inventory.row.add([
                            data.inv[data.stock[ind][2]],
                            data.stock[ind][1],
                            convertStamp(data.stock[ind][3]),
                            convertStamp(data.stock[ind][4]),
                            checkPrice(data.stock[ind][5]/100),
                            checkPrice(data.stock[ind][6]/100),
                            data.stock[ind][7]
                        ]).draw().node());
                        t.attr('id','sto'+ind).attr('data-id',ind).attr('data-up',1).addClass('iv');
                    }
                },20*3);
            }
        }
    });
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...