芝生の手入れ芝生の道具マイホームブログトップマイホームブログWeb【遅延実行!】意図的にイベントの○秒後に実行させる2つのjs【遅延実行!】意図的にイベントの○秒後に実行させる2つのjsWeb2017年8月7日js開発の際、「○秒後にclassを付与したい」など何かしらの処理を遅延して行いたい場合があります。本記事ではそんな時に役立つ、遅延して実行させるjsを2つご紹介させていただきたいと思います。class="moge">クリックして3秒後にアラートが表示されます</a>解説1つめはsetTimeoutを使う方法です。setTimeout関数の中の処理を行いたい記述をし、関数の外にミリ秒で遅延させたい時間を指定します。false;でリンクそのものを無効化しています。※1秒後にする場合は「1000」と記述2つめはjQueryのdelayを使う方法です。delay()のカッコ内にやはりミリ秒で遅延させたい時間を指定します。サンプルでは「$(this).dequeue();」を最後に書き加えることでキューをデフォルトに戻し、繰り返して何度でも実行できるようにしています。1度のみの実行で問題ない場合は不要です。false;でリンク自体は無効化しています。デモ実際に動作を確認できるデモページも公開しておりますのであわせてご確認ください。意図的にイベントの○秒後に実行させる2つのjsまとめ例えば、jsonやxmlを使って実装した複数カラムのコンテンツで確実に高さ揃えを行いたい場合などにおいて、しばしばこの遅延テクニックが役に立ちます。他にもアニメーション処理を組み合わせることでリッチな動きのあるコンテンツを実装することも可能です。jsを使って遅延処理を行いたい場合はどうぞ本記事をご参考にしていただければ幸いです。ため、即時には反映されません。住宅ローン2019年5月7日さらに見る記事を書いている人フォローするRSSを購読するWebデザイナー/フロントエンド・エンジニアのMasaです。独学でWebデザインを勉強後Web業界へ就職し、今の会社に勤めて12年目になりました。2016年4月にマイホームを購入し、休日は芝生いじりと育児に励んでいます。