BDT - debounce-methods

Basic Data Table

v 2.1.0

Not Optimize Methods

without debounce

Optimize Methods

with debounce

Hints:   Open the console and compare the methods called.

Not Optimize Methods

<div id="dbtVUEno"></div>

Optimize Methods

<div id="dbtVUEyes"></div>

Not Optimize Methods

...
<div>
	<b>Sum Compute:</b>
	sum "ID" Original = <span :console="funcs('callSumConsoleInfo')" :call="sum('origItems', 'fld_ID', 'sumOrigItemsID')">{{ tmp.sumOrigItemsID }}</span>
</div>

Optimize Methods

...
<div>
	<b>Sum from CLASS:</b>
	sum "ID" Original = {{ tmp.sum.origItems_ID }}
</div>

Not Optimize Methods

// These methods are only used to visualize activities.
// They are not related to the calculation.
const dbtVUEno = 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 )
}

Optimize Methods

// Debounce library
import debounce from '/library/js/debounce.mjs'
// Assigning a function to a debounce
const debounceCalculateSums = debounce( calculateSums, 50 )

const dbtVUEyes = new basicDataTable({
	...
	// Active debounce function
	onItems:   ()=>{ debounceCalculateSums.start(dbtVUEyes, 'fld_ID', 'onItems') },
	onFilter:  ()=>{ debounceCalculateSums.start(dbtVUEyes, 'fld_ID', 'onFilter') },
	onChecked: ()=>{ debounceCalculateSums.start(dbtVUEyes, 'fld_ID', 'onChecked') },
	onPage:    ()=>{ debounceCalculateSums.start(dbtVUEyes, 'fld_ID', 'onPage') },
});

// Function for visualize activities
function consoleMethods( who ){
	console.log( 'consoleMethods( who ): ', who )
}

// Calculates and writes sums to tmp.sum
function calculateSums( dbt, key, who ){
	consoleMethods( who );
	const t0 = performance.now();
	console.group( 'calculateSums' )
	console.log( 'dbt.id:', dbt.id, ', who:', who, ', key: ', key )
	// Assign arrays
	const origItems     = dbt.origItems,
				filteredItems = dbt.filteredItems,
				pageItems     = dbt.pageItems,
				checkedItems  = dbt.checkedItems;
	// Writing to a variable
	dbt.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()
}