When an asynchronous task succeeds, its Promise executor can call resolve to fulfill the promise. Pass a value to provide the fulfillment result, or call it without one when only completion matters. section 31.1 section 34.2
For callback-based work, connect the success callback to resolve and the error callback to reject. For a canvas fade, call resolve once the image reaches the target opacity; the returned promise then signals that the animation is finished. section 31.1 section 34.2
function fade(image) {
return new Promise(resolve => { 1
function fadeIn(alpha) { 2
draw(image, alpha); 3
if (alpha >= .99) {
resolve(); 4
} else {
alpha += (1-alpha)/24; 5
window.requestAnimationFrame(() => fadeIn(alpha)); 5
}
}
fadeIn(0.1); 6
});
}
!@%STYLE%@!
{"css":"{\"css\": \"font-weight: bold;\"}","target":"[[{\"line\":1,\"ch\":62},{\"line\":1,\"ch\":63}],[{\"line\":7,\"ch\":18},{\"line\":7,\"ch\":19}],[{\"line\":11,\"ch\":13},{\"line\":11,\"ch\":14}],[{\"line\":2,\"ch\":62},{\"line\":2,\"ch\":63}],[{\"line\":7,\"ch\":27},{\"line\":7,\"ch\":28}],[{\"line\":3,\"ch\":62},{\"line\":3,\"ch\":63}],[{\"line\":5,\"ch\":62},{\"line\":5,\"ch\":63}],[{\"line\":7,\"ch\":28},{\"line\":7,\"ch\":29}],[{\"line\":7,\"ch\":62},{\"line\":7,\"ch\":63}],[{\"line\":8,\"ch\":62},{\"line\":8,\"ch\":63}],[{\"line\":7,\"ch\":62},{\"line\":7,\"ch\":63}],[{\"line\":8,\"ch\":62},{\"line\":8,\"ch\":63}],[{\"line\":11,\"ch\":62},{\"line\":11,\"ch\":63}]]"}
!@%STYLE%@!
The fade function captures resolve and calls it when the final opacity is reached. section 34.2
