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

[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;
}
}

_updateVisibleRows() {
const tableBody = document.querySelector(".table-wrapper tbody");
if (!tableBody) return;

const startIndex = Math.floor(this.scrollTop / this.averageRowHeight);
const endIndex = Math.min(startIndex + this.limit, this.totalRowsInTable);

const topSpacerHeight = startIndex * this.averageRowHeight;
const bottomSpacerHeight =
(this.totalRowsInTable - endIndex) * this.averageRowHeight;

let topSpacer = document.querySelector("#top-spacer");
let bottomSpacer = document.querySelector("#bottom-spacer");

if (!topSpacer) {
topSpacer = document.createElement("tr");
topSpacer.id = "top-spacer";
}
if (!bottomSpacer) {
bottomSpacer = document.createElement("tr");
bottomSpacer.id = "bottom-spacer";
}

topSpacer.style.height = `${topSpacerHeight}px`;
bottomSpacer.style.height = `${bottomSpacerHeight}px`;

tableBody.innerHTML = "";
tableBody.appendChild(topSpacer);

const visibleData = this.linkedList.getRange(startIndex, endIndex);
if (visibleData.length === 0) {
return;
}

visibleData.forEach((nodeData) => {
if (nodeData) {
const row = this.page.contentBuilder.buildRow(nodeData, false);
tableBody.appendChild(row);
}
});

tableBody.appendChild(bottomSpacer);

}

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