回答編集履歴

1 ちょうせい

yambejp

yambejp score 85858

2019/10/21 14:05  投稿

非同期でもないないのでdeferredで処理しなければよいのでは?
非同期でもないないのでdeferredで処理しなければよいのでは?
# sample
非同期になる要素がないのでdeferredを外したバージョンのsampleをあげておきます
ちょっと雑に書いたのでもうすこし調整が必要かも
(挙動が違うならご指摘ください)
```javascript
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
 var count=0;
 var my_hand="";
 var pc_hand="";
 $('#start').on('click',function(){
   $('#start').prop('disabled',true);
   $('#my_hand_id').text("");
   my_hand="";
   var kakegoe=["じゃん","けん","ぽん"]
   $('#pc_hand_id').text("");
   var timerId=setInterval((function janken(){
     if(count==0) pc_hand=["グー","チョキ","パー"][parseInt(Math.random()*3)];
     console.log(pc_hand);
     if($('#instruction').text()=="あい"){
       $('#my_hand_id').text("");
       $('#pc_hand_id').text("");
     }
     if(kakegoe.length<=count){
       clearInterval(timerId);
       count=0;
       $('#pc_hand_id').text(pc_hand);
       $('#instruction').css({opacity:1});
       if(my_hand==""){
         $('#instruction').text("ださないので負け");
         $('#start').prop('disabled',false);
       }else if(["グー_チョキ","チョキ_パー","パー_グー"].indexOf(my_hand+"_"+pc_hand)>-1){
         $('#instruction').text("かち");
         $('#start').prop('disabled',false);
       }else if(["チョキ_グー","パー_チョキ","グー_パー"].indexOf(my_hand+"_"+pc_hand)>-1){
         $('#instruction').text("まけ");
         $('#start').prop('disabled',false);
       }else{
         my_hand="";
         kakegoe=["あい","こで","しょ"];
         timerId=setInterval(janken,1000);
       }
     }else{
       $('#instruction').css({opacity:1}).text(kakegoe[count]).animate({opacity:0});
       count++;
     }
     return janken;
   })(),1000);
 });
 $('[data-hand]').on('click',function(){
   if(count>0){
     my_hand=$(this).data('hand');
     $('#my_hand_id').text($(this).data('hand'));
   }
 });
});
</script>
<header>
<h1>じゃんけんゲーム</h1>
<button id="start">START</button>
<br />
<br />
</header>
<main>
<div id="instruction"></div>
<br />
<div id="hands">
<div>あなた 「<span id="my_hand_id"></span>」</div>
<div>コンピュータ 「<span id="pc_hand_id"></span>」</div>
</div>
<br />
<div id="judgement"></div>
</main>
<div id="controller">
<ul>
<li class="my_hand" data-hand="グー">グー</li>
<li class="my_hand" data-hand="チョキ">チョキ</li>
<li class="my_hand" data-hand="パー">パー</li>
</ul>
</div>
<footer></footer>
```

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る