Проверьте 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);
}
}
});
}