edysegura / js-callback

A simple example to demonstrate how to use callback in JavaScript using image HTML element

JavaScript Callback

A simple example to demonstrate how to use callback in JavaScript using image element

How to fetch the images

In order to have the images please run the command line bellow:

npm run catch-them-all

How to start

After installing the dependencies with npm install run the command bellow:

npm start

References

• Mastering JavaScript Callbacks

js-callback's Issues

Add catch-them-all in npm scripts

Add an example to load images in a specific order

Add a progress bar

Examples:

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress
• https://css-tricks.com/html5-progress-element/

Add it to Docker

Use multi-stage to build

Convert imports to ESM

• app.js
• script

Merge both scripts to avoid duplicated code

• index.js
• load-in-order.js

Progress bar is not working as expected

As we are defining a new closures to each created image it is not working as expected!

js-callback/js/load-in-order.js

Lines 8 to 20 in 25233c3

	function updateProgressbar() {
	const progressBar = document.querySelector('progress')
	const progressPercentage = document.querySelector('span')
	const total = pokemonsNumber.length
	let loaded = 0
	return () => {
	++loaded
	let percentage = Math.floor((loaded * 100) / total)
	progressBar.value = percentage
	progressPercentage.textContent = percentage + '%'
	}
	}

js-callback/js/load-in-order.js

Line 27 in 25233c3

image.addEventListener('load', updateProgressbar())