Javascript setInterval（）を同時に2回実行する

Question

私は単一のsetInterval()を持っているが、同時に2回実行している問題があります。 私のコードは、あるdivの画像を複製し、別のdivに配置します。 setInterval()は画像の3倍クローンしていますが、実際には6回クローンします。 setIntervalが終了すると警告が表示されます。 5番目のクローンが配置されたときにアラートが表示され、6番目のクローンが再び表示されます。これは、5番目のクローンが最初のsetInterval()の最後であり、6番目が2番目のクローンの末尾であることを意味します。しかし、私は1つだけsetInterval() 3つのクローンを作ることが欲しいです。何が起こっている？

HTML：

<div class="inimigo"> 
    <img src="inimigo.png"> 
</div> 

<div class="jogo2"> 

</div> 

のjQuery：

$(document).ready(function() { 
    var counter2 = 0; 
    var i = setInterval(function() { 
     var inimigo = $(".inimigo").clone(); 
     $('.jogo2').html(inimigo); 

     counter2++; 
     if(counter2 === 3){ 
      alert("end"); 
      clearInterval(i); 
      counter2 = 0; 
     } 
    }, 200); 
}); 

Answer 1

私はクローンが問題を引き起こしていると思います。 html()を使用する場合は、HTMLをテキストとして渡す必要があります。

$(document).ready(function() { 
    var counter2 = 0; 
    var i = setInterval(function() { 
     var inimigo = $(".inimigo").clone(); 

     // Followin is the fix code 
     $('.jogo2').prepend(inimigo.html()); 
       // or use append to put new content at last 
     //$('.jogo2').append(inimigo.html()); 

     counter2++; 
     if(counter2 === 3){ 
      alert("end"); 
      clearInterval(i); 
      counter2 = 0; 
     } 
    }, 200); 
});