Question

我遇到问题，我有一个setInterval()，但它同时执行了两次。我的代码从一个div克隆一个图像并将其放在另一个div中。 setInterval()克隆了3倍的图像，但实际上克隆了6次。当setInterval结束时，我会收到提醒。放置第5个克隆时会弹出警报，而第6个克隆再次弹出警报，这意味着第5个克隆是第一个setInterval()的结尾，第6个克隆是第二个克隆的结尾。但我只想要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

我猜Clone造成了问题。当您使用html()时，您应该将HTML作为文本传递。

请检查解决方案，（JSFiddle）

$(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);
});

Javascript setInterval（）同时执行两次

1 个答案: