処理をループさせたい

Question

###前提・実現したいこと
一定時間で処理をループさせたいです。
下記の内容です。

・6秒後にdivにaddclass("active")
・addclassが実行されてから2秒後にremoveclass("active")

これをループさせたい
（6秒＋2秒だから8秒？）

###発生している問題・エラーメッセージ
色々調べて下記コードを書いてみたのですが、上手くいきませんでした。。。

###該当のソースコード

setInterval(function(){
           setTimeout(function(){
                 $("div").addClass("active");
            },6000);
           if($("div").hasClass('active')){
              setTimeout(function(){
                 $("div").addClass("active");
            },2000);
           }
	},8000);

このような場合、どのように記述すればよいのでしょうか。。
ご教授いただけますと助かります！

Answer 1

setIntervalを使うより、setTimeoutを連鎖させるほうがいいかもしれません。

function add(){
  $("div").addClass("active");
  setTimeout(remove, 2000);
}

function remove(){
  $("div").removeClass("active");
  setTimeout(add, 6000);
}

add();

Comments

[hikochang]

これって8秒のインターバル守れますか？誤差が蓄積しそうな気がします。

Answer 2

6秒+2秒なら１秒でカウンタを回し、
カウンタを8で割ったあまりが6のときに前者、
あまり0のときに後者を実行（ただしカウンタが0の時を除く）
すればいいのでは？

<script>
var count=0;
var timer=setInterval(function(){
  count++;
  document.getElementById('d1').value++;
  if(count%8==6 )document.getElementById('d2').value++;
  if(count%8==0 )document.getElementById('d3').value++;
},1000);
</script>
<input type="text" id="d1" value="0"><br>
<input type="text" id="d2" value="0"><br>
<input type="text" id="d3" value="0"><br>

Answer 3

せっかくjQuery使ってることですし、こんなんはどうでしょうか？

setInterval(function(){
	$.when(
		$("#testDiv").delay(6000).addClass("active")
	).then(function(){
		$("#testDiv").delay(2000).removeClass("active")
	});
},8000);

Answer 4

setTimeoutブロックされないので今の処理だとif文がtrueになる事が無いと思います。
タイマーを繋げる方法だと誤差が蓄積していくので、インターバルを使いたいと言う事であれば、以下の方法も有ります。

setInterval(function(){
           setTimeout(function(){
                 $("div").addClass("active");
            },6000);
           setTimeout(function(){
                 $("div").removeclass("active");
            },8000);
    },8000);