Not Optimize Methods
without debounce
Optimize Methods
with debounce
without debounce
with debounce
<div id="bdtVUEno"></div>
<div id="bdtVUEyes"></div>
...
<div>
<b>Sum Compute:</b>
sum "ID" Original = <span :console="funcs('callSumConsoleInfo')" :call="sum('origItems', 'fld_ID', 'sumOrigItemsID')">{{ tmp.sumOrigItemsID }}</span>
</div>
...
<div>
<b>Sum from CLASS:</b>
sum "ID" Original = {{ tmp.sum.origItems_ID }}
</div>
// These methods are only used to visualize activities.
// They are not related to the calculation.
const bdtVUEno = new basicDataTable({
...
onItems: ()=>{ consoleMethods( 'onItems' ) },
onFilter: ()=>{ consoleMethods( 'onFilter' ) },
onChecked: ()=>{ consoleMethods( 'onChecked' ) },
onPage: ()=>{ consoleMethods( 'onPage' ) },
});
// Function for visualize activities
function consoleMethods( who ){
console.log( 'consoleMethods( who ): ', who )
}
// Debounce library
import debounce from '/library/js/debounce.mjs'
// Assigning a function to a debounce
const debounceCalculateSums = debounce( calculateSums, 50 )
const bdtVUEyes = new basicDataTable({
...
// Active debounce function
onItems: ()=>{ debounceCalculateSums.start(bdtVUEyes, 'fld_ID', 'onItems') },
onFilter: ()=>{ debounceCalculateSums.start(bdtVUEyes, 'fld_ID', 'onFilter') },
onChecked: ()=>{ debounceCalculateSums.start(bdtVUEyes, 'fld_ID', 'onChecked') },
onPage: ()=>{ debounceCalculateSums.start(bdtVUEyes, 'fld_ID', 'onPage') },
});
// Function for visualize activities
function consoleMethods( who ){
console.log( 'consoleMethods( who ): ', who )
}
// Calculates and writes sums to tmp.sum
function calculateSums( bdt, key, who ){
consoleMethods( who );
const t0 = performance.now();
console.group( 'calculateSums' )
console.log( 'bdt.id:', bdt.id, ', who:', who, ', key: ', key )
// Assign arrays
const origItems = bdt.origItems,
filteredItems = bdt.filteredItems,
pageItems = bdt.pageItems,
checkedItems = bdt.checkedItems;
// Writing to a variable
bdt.tmp = {
sum:
{
// Calculation
origItems_ID: origItems.map( aV => aV[key] ).numbers.sum,
filteredItems_ID: filteredItems.map( aV => aV[key] ).numbers.sum,
pageItems_ID: pageItems.map( aV => aV[key] ).numbers.sum,
checkedItems_ID: checkedItems.map( aV => aV[key] ).numbers.sum,
}
}
console.log( (performance.now() - t0) + ' ms' )
console.groupEnd()
}