Cześć,
Pracuję na projekcie, który korzysta ze sporych danych, co przekłada się freezowanie strony, przy np. przygotowaniu danych do exportu do pdf/xlsx, czy też zaznaczaniu danych w tabeli, rozwijaniu itp. Używam w projekcie devexpress, ale już mam wrażenie, że ustawiłem wszystko co mogłem do optymalizacji, ale wciąż strona zamiera na czas obliczeń.
Rozwiązaniem mojego problemu byłoby znalezienie sposobu na zapewnienie asynchroniczności do moich funkcji, tzn. chciałbym poinformować przeglądarkę, że ma obliczać funkcję tylko, gdy ma "zapas" czasu, tak aby strona nie freezowała się, a obliczenia się wykonywały w tle (ja sobie zapodam wtedy efekt loadingu na komponent).
Jakie są wasze sposoby na to? W głównej mierze zabójcami mojej strony są forEach i map, myślałem żeby je ustawić, jako asynchroniczne i zmusić do spowolnienia czasowego (np. 1ms na iteracje jako 'timeout'), ale mega nie byłbym zadowolony z takiego rozwiązania. Poza tym w przypadku niektórych funkcji (np. wyciąganie danych z dataGrid devexpress) nie mam żadnego wpływu na iteracje w nich zachodzące, bo to biblioteki.
Próbowałem wrzucić np. funkcję do Promise i wyzwalać go w momencie zakończenia obliczeń, ale bez rezultatów, wywołanie promisa też freezuje stronę. Funkcja jest wywoływana po prostu w przycisku na onClick(). Przykład poniżej:
async function onExportPdf(e) {
try {
await new Promise((resolve, reject) => {
const doc = new jsPDF()
grid.getDataSource().store().load().done().then((data) => {
const conditions = grid.getCombinedFilter('returnDataField')
let outDataSource = new ArrayStore(data)
outDataSource
.load({ filter: conditions })
.done((filteredData => {
doc.autoTable({
body: props.options.worksheetExport.getDetails(filteredData),
columns: props.options.worksheetExport.columns,
})
}))
doc.save('myFile.pdf')
e.cancel = true
resolve()
})
})
} catch (reject) {
console.error(reject)
}
}
Z góry dzięki :)