javascriptにて タイマーの使い方

Question

前提・実現したいこと

javascriptでの質問です

はじめまして
初心者で、わからないことだらけで
教えてください

現在　ラジオボタンのチェックが入ったら
div要素を表示させ

タブみたいなのを作っていて

スタートボタンを押すと
自動でチェックが入り
スライドショーみたいな感じで
DIVを表示させたのですが

イマイチsetIntervalが理解できず

色々なやり方を見てもできず
お力を・・・

test関数を　start_btをクリックしたら
タイマーを動かし呼び出すとやっていますが

test関数で　どのように
繰り返して
checked,trueをするのかわからず

もちろん　最後までいったら
また最初にもどらなければならいので

アドバイスをよろしくお願い致します。

該当のソースコード

$(function(){
$("#start_bt").click(function(){
setInterval("test()",1000);
});

function test() {
$("#tes0").prop("checked",true);
$("#tes1").prop("checked",true);
$("#tes2").prop("checked",true);
$("#ltes3").prop("checked",true);
$("#tes4").prop("checked",true);
}

Answer 1

こんな感じですかね

#div0{background-Color:yellow;}
#div1{background-Color:lime;}
#div2{background-Color:aqua;}
#div3{background-Color:fuchsia;}
#div4{background-Color:blue;}

var timerId=0;
$(function(){
  $('.d').hide();
  $("#start_bt").on('click',function(){
    if($(this).val()=='start'){;
      $(this).val('stop');
      timerId=setInterval(function(){
        if($('[name=r]:checked').length==0 || $('[name=r]:last').prop('checked')){
          $('[name=r]:first').trigger('click');
        }else{
          $('[name=r]').eq($('[name=r]').index($('[name=r]:checked'))+1).trigger('click');
        }
      },1000);
    }else{
      $(this).val('start');
      clearInterval(timerId);
    }
  });
  $('[name=r]').on('change',function(){
    $('.d').hide().eq($('[name=r]').index(this)).show();
  });
});

<label><input type="radio" name="r" value="0">tes0<br></label>
<label><input type="radio" name="r" value="1">tes1<br></label>
<label><input type="radio" name="r" value="2">tes2<br></label>
<label><input type="radio" name="r" value="3">tes3<br></label>
<label><input type="radio" name="r" value="4">tes4<br></label>
<input type="button" value="start" id="start_bt">
<div id="div0" class="d">div0</div>
<div id="div1" class="d">div1</div>
<div id="div2" class="d">div2</div>
<div id="div3" class="d">div3</div>
<div id="div4" class="d">div4</div>

Comments

[ROONIN]

回答ありがとうございます
まだ、私の知識技術だと難解ですが
なんとなくやってることはわかります

このサンプルを見ながら自分のと
比較してやってみましたが
上手く動きません
すいません　勉強不足ですね。。

Answer 2

やりたいことが微妙によくわからないのですが、

$("#tes0").prop("checked",true);
$("#tes1").prop("checked",true);
$("#tes2").prop("checked",true);
$("#ltes3").prop("checked",true);
$("#tes4").prop("checked",true);

これらを一気に実行するのではなく、時間差で実行したいということですか？
現在の書き方だと１秒後に一気にすべて check　が付くという書き方になっていますね。
そして、１秒ごとに毎回上記が一気に実行されます。

ラジオボタンの数が決まっているのであれば、setInterval よりも setTimeout の方が作りやすいかもしれませんね。

Comments

[ROONIN]

わかりづらくてすいません

$("#tes0").prop("checked",true);
5秒後
$("#tes1").prop("checked",true);
5秒後
$("#tes2").prop("checked",true);
5秒後
$("#ltes3").prop("checked",true);
5秒後
$("#tes4").prop("checked",true);
5秒後
#test1に戻る
タイマーが停止するまで繰り返すです

[ssasaki]

やはりそういうことですよね。
美しくないコードですが、まずは直感的に分かりやすい setTimeout の方を使ってみてはどうでしょうか？

setTimeout("test0()",1000);
function test0() {
$("#tes0").prop("checked",true);
setTimeout("test1()",1000);
}
function test1() {
$("#tes1").prop("checked",true);
setTimeout("test2()",1000);
}

...

といった感じで作れるのではないかと思いますが。
数が多かったり可変の場合には、setInterval の方が良いと思います。

[ROONIN]

これは、1秒後に
指定要素をチェックする動作ですよね？
これならわかりやすいですが

可変の場合はどうすればいいのでしょうか？

これだと最後までいってしまうと
止まりますので
また最初の位置に戻りたい場合は
setIntervalで繰り返し処理の記述をしなければならないですよね？
すいません

[ssasaki]

最初の位置に戻るには以下のような感じでいいかと思います。

function test100() {
$("#tes100").prop("checked",true);
setTimeout("test0()",1000);
}

可変の場合には setTimeout でも可能ですが再帰呼び出しになるので、setIntervalで実装した方が分かりやすいと思います。
ザックリ書くと、

var xxx;
setInterval("test()",1000);

function test() {
xxx.prop("checked",true);
xxx = ... //次のターゲットをセット
}

といった感じになるかと。

[ROONIN]

var XXX;
が保持用の変数で

function test() {
xxx.prop("checked",true);
xxx = ... //次のターゲットをセット
}

動いて
0.prop("checked",true);が作動し
保持用の変数に
1.prop("checked",true);

ので繰り返すという解釈でいいですか？？

[ssasaki]

はい。その通りです。

[ROONIN]

何回も質問すいません
ＶＢ系しかやってこなかったので
変数の定義がよくわからなくて　

この変数自体に$("#tes1")をいれるわけではないんですよね？？

[ssasaki]

$("xxxx") で取得できるオブジェクトそのものを変数に入れても良いですし、xxxx の部分（セレクタと言います）を変数に入れてもいいです。
非同期処理なのでセレクタを変数に入れる実装の方が無難な気はしますが。

[ROONIN]

var temp;
ver num = 0;

function test() {
temp.prop("checked",true);
temp = $("#tes".num+1)
if num<4
num = 0
}

こうですかね？？
自由度がある分　理解ができなくて申し訳ないです
サンプルみたいのが欲しいです

[ssasaki]

細かい部分は置いておくとして、概ねそんな感じです。