Das Flackern in virtuellem Scrollen und anderen Problemen, weiß jemand auch? [geschlossen] ⇐ Php

[Guest]

Dies ist der Listener von Scroll Event. Es feuert jedes Mal, wenn sogar eine kleine Schriftrolle erkannt wird. Dies löst zu viele Daten ab. Die Last mehr Datenfunktion ist verallgemeinert und löst Daten ab. und UpdateVissiblerows -Funktion wird verwendet, um die Tabellenzeilen zu rendern, während wir scrollen, was auch viele Male < /p>
feuert

Code: Select all

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