皆さん、JavaScriptで「アニメーションAを3秒かけて実行したあと、アニメーションBを実行」などと、順番に処理を実行したいとき、どのようにしていますか? 以下のように setTimeout() を使って実現しているでしょうか? function serialAnim () { // ...アニメーションAの処理 setTimeout(() => { // ...アニメーションBの処理 }, 3000) } うーん、ダサいですね。 それとも以下のようにコールバックを利用しているでしょうか? animA(animB) function animA (callback) { // ...アニメーションAを実行した後に、callback(この例ではanimB)を実行する処理 } setTimeout() は、保守性に問題があることはもちろん、そもそもが「◯秒以降」に実行されるという関数なので
![setTimeoutはダサいぞ。JavaScript Promiseを使って処理を順番に実行しよう | 株式会社LIG(リグ)|DX支援・システム開発・Web制作](https://cdn-ak-scissors.b.st-hatena.com/image/square/b972b19e5c48189d6e51c75a154d16edf6aec903/height=288;version=1;width=512/https%3A%2F%2Fliginc.co.jp%2Fwp-content%2Fuploads%2F2017%2F02%2F148768643862050300_25.jpg)