jQuery setTimeoutの使い方がいまいち理解できません。良い改善方法を知りたいです。

前提・実現したいこと

３つの灰色のボックスを用意しました。ボタンを押すと
赤　灰色　灰色
↓
灰色　黄色　灰色
↓
灰色　灰色　緑
というように時間差で色を変えたいと考えsetTimeoutを使ってプログラムを書きました。

発生している問題・エラーメッセージ

現時点ではエラーが出ていませんが、時間差の設定を１つ変えるとそのほかの時間設定も全て変えなくてはならないです。1500ms、3000ms、4500msで処理するのでははなく、1500msで処理したら次、1500msで処理したら次
、1500msで処理するという風にもっと効率よく書く方法はありますでしょうか？お願い致します。

html
1```<!DOCTYPE html>
2<html lang="java">
3    <head>
4        <meta charset="utf-8">
5        <link rel="stylesheet" href="css/styles.css">
6    </head>
7    <body>
8      <div id="body">
9        <div  id="red"></div>
10        <div  id="yellow"></div>
11        <div  id="green"></div>
12      </div>
13
14      <div id="btn">押してください</div>
15
16      <div id="reload">リセットボタン</div>
17
18      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
19      <script src="js/main.js"></script>
20    </body>
21</html>
22

css
1body {
2  display: flex;
3  flex-wrap: wrap;
4}
5#red,
6#yellow,
7#green {
8  width: 200px;
9  height: 200px;
10  background: grey;
11  line-height: 200px;
12  user-select: none;
13  float: left;
14  margin: 10px;
15}
16
17#btn {
18  width: 150px;
19  height: 150px;
20  line-height: 150px;
21  text-align: center;
22  font-weight: bold;
23  border-radius: 50%;
24  background: red;
25  color: white;
26  cursor: pointer;
27  margin: 250px auto 0;
28  user-select: none;
29}
30
31#reload {
32  font-size: 18px;
33  font-weight: bold;
34  width: 150px;
35  height: 150px;
36  background: black;
37  border-radius: 50%;
38  text-align: center;
39  line-height: 150px;
40  margin: 250px auto 0;
41  color: red;
42  cursor: pointer;
43  user-select: none;
44}
45

javascript
1$(function(){
2  const myDefer = $.Deferred();
3
4  $('#btn').click(function(){
5    myDefer.resolve();
6  });
7  $('#btn').dblclick(function(){
8    myDefer.reject();
9  });
10
11  const myPromise = myDefer.promise();
12
13  myPromise.then(
14    function(){
15      $('#red').css('background', 'red');
16    }
17  ).then(
18    function(){
19      setTimeout(function(){
20        $('#yellow').css('background', '#FFFF00');
21        $('#red').css('background', '');
22      },1500);
23    }
24  ).then(
25    function(){
26      setTimeout(function(){
27        $('#green').css('background', 'green');
28        $('#yellow').css('background', '');
29      },3000);
30    }
31  ).then(
32    function(){
33      setTimeout(function(){
34        $('#green').css('background', '');
35      },4500);
36    }
37  );
38  $('#reload').click(function() {
39    location.reload();
40  });
41});
42

m.ts10806

2019/03/01 04:19

インデントが全くないので書きづらい読みづらい感じになってます。実際のコードにインデントつけられた上で質問コードも更新していただけますか？ Web上でコードフォーマットを行えるサイトもありますが、できればフォーマット機能のあるエディターを利用してください。

kira-kira

2019/03/01 04:28

ご指摘ありがとうございます。現在、出先のため戻り次第修正致します。一応ですが、エディターはAtomを利用しています。

kira-kira

2019/03/01 05:51

mts 10806さん今、出先から戻り直そうと思ったのですが、コードにインデントがついた状態でコピーして貼り付けてもteratailではインデントが全くない状態で表示されてしまいます。どのようにすればインデントがついた状態で表示できるのでしょうか？

m.ts10806

2019/03/01 05:54

コードブロック内ならそのまま表示されるので問題はないとは思いますが念のため冒頭を ```html のように各言語名を入れてみてください。

kira-kira

2019/03/01 06:14

各言語名を入れてみたのですがインデントがつきません。。。

m.ts10806

2019/03/01 06:27

んーおかしいですね。いままで質問でも回答でもできてるはずなので。直接編集で半角スペースはどうでしょう？

kira-kira

2019/03/01 07:30

直接半角スペース入れてみても、プレビューで確認するとインデントがつきません。

m.ts10806

2019/03/01 07:34

んー私の方では質問でも回答でもできてるのでなんとも言えないですね

kira-kira

2019/03/01 07:47

色々と改善方法を考えてくださりありがとうございました！もう少し原因を考えてみます！

行動規範の内容に同意します

回答2件

ベストアンサー

変数に持てばいいだけでは？
jQuery なら .delay() を使えばいいでしょう。

CSS
1#body[data-signal="red"] #red {
2  background: red;
3}
4
5#body[data-signal="yellow"] #yellow {
6  background: #FFFF00;
7}
8
9#body[data-signal="green"] #green {
10  background: green;
11}

jQuery
1const duration = 1500;
2$('#body').delay(duration).queue(function(next) {
3  $(this).attr('data-signal', 'red').dequeue();
4}).delay(duration).queue(function(next) {
5  $(this).attr('data-signal', 'yellow').dequeue();
6}).delay(duration).queue(function(next) {
7  $(this).attr('data-signal', 'green').dequeue();
8}).delay(duration).queue(function(next) {
9  $(this).attr('data-signal', '').dequeue();
10});

https://api.jquery.com/delay/

投稿2019/03/01 05:14

x_x

総合スコア13749

kira-kira

2019/03/01 05:53

ありがとうございます。先ほど出先から戻り修正、変更したところ上手くいきました。変数があることで楽に短く書くことができました。jqueryを使った回答であったためベストアンサーに選ばさせていただきました。

行動規範の内容に同意します

javascript
1<style>
2#body div{background-Color:grey;}
3#red.active{background-Color:red;}
4#yellow.active{background-Color:yellow;}
5#green.active{background-Color:green;}
6</style>
7<script>
8var count=0;
9var color_id=["#red","#yellow","#green"];
10var timerId;
11window.addEventListener('DOMContentLoaded', function(e){
12  document.querySelector('#btn').addEventListener('click',function(e){
13    var t=e.target;
14    clearInterval(timerId);
15    if(t.textContent=="start"){
16      timerId=setInterval(function(){
17        count++;
18        count%=3;
19        document.querySelector('#body .active').classList.remove("active");
20        document.querySelector(color_id[count]).classList.add("active");
21      },1500);
22    }
23    t.textContent=t.textContent=="stop"?"start":"stop";
24  });
25});
26
27</script>
28<div id="body">  
29<div  id="red" class="active">R</div>  
30<div  id="yellow">Y</div>  
31<div  id="green">G</div>  
32</div>  
33<div id="btn">start</div>
34