× {{alert.msg}} Never ask again
Get notified about new tutorials RECEIVE NEW TUTORIALS

Javascript event loop: use setTimeout to get something pushed to the next tick/frame

Jan 24, 2016
<p>Frustrated fellow was using css transitions, and setting them from JS. He set the transform to one thing, then set it to another together with a transition css property, expecting the transition to go from the first transform to the second.</p> <p>Turns out that the browser has no way of "knowing" the first transform, so it was borking things up. What he needed to do was set it to the first, let the browser have control, and set it to the second.</p> <p>JS has a way to do this, via the setTimeout() function. It allows you to set a callback, that would operate the next "tick", after the execution queue of the current tick had finished (and thus registered the first transform he wished to transition from). He set the second transform and the corresponding transition property inside a callback and handed that to setTimeout(), and everything worked as expected.</p> <p> </p>
comments powered by Disqus