Ali Naci Erdem

Let’s imagine that we want to manage cancellation of an async operation using generator functions in javascript. When a secondary event occurs, we can listen for it and force the generator function to return by calling its return method and handle cleanup in the finally block, which will always run before a generator returns. Say we have the following imaginary async generator, which will wait for a second and yield; var generator = async function*() { try { yield await new Promise((r) => { setTimeout(r, 1000) }).then(() => 'Waited for 1 sec.') // More yields... } finally { // Do cleanup here. e.g. abort an XHR or invoke a // cancellation on some ongoing operation console.log('Did cleanup.') }} Then we want to run such a generator to completion in a loop. One way to do this is using an asynchronous for await…of loop. Let’s say we call return before the async operation in the generator is complete. va...

Animation is a pain if you do not know how it is implemented. Basically, you are updating a value with respect to time. This is generally done by calculating the time elapsed since the last frame and interpolating this value between its initial and final values. The interpolation needn’t be linear, there are many such interpolating functions with for example some easing. Even there are methods that will consider previous and later values such as Catmull-Rom splines. In this article, I’ll not go into the details but just introduce a simple ‘hack’ if you will. This approach is influenced mainly from Unity coroutines with the yield keyword. Similarly,with the help of new ECMAscript features, namely async functions and await, we can define an animate function as such; const startValue = 0; // start valueconst endValue = 100; // end valueconst totalTime = 1000; // Aniation time in millisecondslet value = startValue;async function animate() { const lastTime = perf...