debounceif

debounceif

DebounceIf a condition is met.

Sample Usage

TypeScript

debounce(() => {
	console.log('Debounced after 1s!')
}, 1000)

let isLoading = true
setTimeout(() => (isLoading = false), 5000)

// Example using function
let dots = ''
debounceIf(
	() => {
		console.log('Debounced after condition is met!')
	},
	500,
	() => {
		dots += '.'
		if (dots.length > 3) {
			dots = '.'
		}
		console.log('Loading' + dots)
		return !isLoading
	},
)

// Example with class instantiation
const debounceInst = new DebounceIf(() => {
	console.log('Debounced from DebouncedIf() instance after 2s!')
}, 2000)

debounceInst.debounce()

HTML

<input type="text" id="debounce" />
<div id="suggestions"></div>

<script>
	var exports = {}
</script>
<script src="debounceIf.js"></script>
<script>
	const words = ['world', 'wide', 'web']
	document.getElementById('debounce').onkeypress = event => {
		exports.debounce(() => {
			const search = event.target.value
			const suggestions = words
				.filter(word => word.startsWith(search.toLowerCase()))
				.sort()
				.join('<br />')
			document.getElementById('suggestions').innerHTML = suggestions
		}, 500)
	}
</script>

See tests/debounceIf.html to learn more about how to incorporate this into your project via HTML and JS or tests/usage.ts for an example on how to debounceIf with NodeJS and Typescript.

Available Scripts

In the project directory, you can run:

npm run build

Builds debounceIf.ts and tests/usage.ts into JS files for usage. usage.ts is a demo of the script being used in Typescript while tests/debounceIf.html provides a demonstration of usage within the browser.

npm run test-usage

Runs the sample usage.js file which should output a log in your console.

Learn More

You can learn more about the developer here.