Столкнувшись с мерцанием в виртуальной прокрутке и других проблемах, кто -нибудь знает? [закрыто] ⇐ CSS

[Anonymous]

Это слушатель событий Scroll. Он стреляет каждый раз, когда обнаруживается даже небольшой свиток. который запускает слишком много извлечений данных. Функция нагрузки больше данных обобщена и запустит извлечение данных. и функция Updatevisiblorows используется для визуализации строк таблиц при прокрутке, который также является огнем много раз < /p>
_onScroll(scrollTop, limit) {
const tableWrapper = document.querySelector(".table-wrapper");
if (!tableWrapper) return;

const isScrollingDown = scrollTop > this.scrollTop;
this.scrollTop = scrollTop;

// const isBufferLoaded = this.buffer.size === this.totalRowsInTable;

// if (isBufferLoaded && isScrollingDown) {
// this._updateVisibleRows();
// return;
// }

if (isScrollingDown) {
this._loadMoreData("down", limit);
} else {
this._loadMoreData("up", limit);
}
this._updateVisibleRows();
}

async _loadMoreData(direction, count) {
if (this.isFetching) return;
this.isFetching = true;

let fetchOffset;
const limit = count;
this.linkedList = new CircularDoubleLinkedList(limit);

// if (this.buffer.size >= this.totalRowsInTable) {
// this.isFetching = false;
// return;
// }

if (direction === "down") {
fetchOffset = Math.floor(this.scrollTop / this.averageRowHeight);
} else if (direction === "up") {
fetchOffset = Math.max(
0,
Math.floor(this.scrollTop / this.averageRowHeight) - limit
);
}

// if (fetchOffset >= this.totalRowsInTable) {
// this.isFetching = false;
// return;
// }

try {
const startIndex = fetchOffset;
const endIndex = fetchOffset + limit;

for (let i = startIndex; i < endIndex; i++) {
if (this.buffer.has(i)) {
this.linkedList.updateNode(i % limit, this.buffer.get(i));
}
}

const missingIndices = [];
for (let i = startIndex; i < endIndex; i++) {
if (!this.buffer.has(i)) {
missingIndices.push(i);
}
}

if (missingIndices.length > 0) {
const methodName = `get${
this.pageName.charAt(0).toUpperCase() + this.pageName.slice(1)
}`;

if (typeof this.page.data[this.pageName][methodName] === "function") {
let response;

if (this.pageName === "expenses" || this.pageName === "timeEntries") {
const startDate = Dates.convertJS2SQL(
this.page.filters.startDate ||
localStorage.getItem(this.page.keys.startDate)
);
const endDate = Dates.convertJS2SQL(
this.page.filters.endDate ||
localStorage.getItem(this.page.keys.endDate)
);

// console.log("Using Date Range:", startDate, "to", endDate);
// console.log(
// "Selected Resources:",
// this.page.filters.selectedResources
// );
// console.log(
// "Selected Projects:",
// this.page.filters.selectedProjects
// );

response = await this.page.data[this.pageName][methodName](
startDate,
endDate,
this.page.filters.selectedResources || [],
this.page.filters.selectedProjects || [],
fetchOffset,
this.limit
);
} else {
response = await this.page.data[this.pageName][methodName](
fetchOffset,
this.limit
);
}

const data = Array.isArray(response)
? response
: response?.payload || [];

data.forEach((row, index) => {
const globalIndex = fetchOffset + index;
this.buffer.set(globalIndex, row);

this.linkedList.updateNode(globalIndex % limit, row);
});
}
}
} catch (err) {
console.error("Error loading more data:", err);
} finally {
this.isFetching = false;
}
}


Подробнее здесь: https://stackoverflow.com/questions/794 ... yone-knows