javascript - 坚持 Jquery 动画无限循环

Question

我正在尝试创建气泡，重复几次后我的浏览器卡住了。这是我的代码。有人请帮助....我如何在不提出许多请求的情况下完成它。

看起来我的帖子主要是代码，但我为这个 Stackoverflow 添加了足够的细节:)

谢谢!

Jquery:

    $(document).ready(function() {

                           function bubbles()
                       {


                       var i = 0;


                      $(".circle").remove();



                       for(i = 0; i < 3; i ++ )

                       {

                             var CreateDiv =   document.createElement('div');

                      var AppendElem =  document.body.appendChild(CreateDiv);

                      AppendElem.setAttribute('class','circle');

                      CreateDiv.style.position = "absolute";

                      var randomPosTop = Math.floor((Math.random() * 800) + 1);

                      CreateDiv.style.top = randomPosTop +"px";

                       var randomPosLeft = Math.floor((Math.random() * 1200) + 1);

                       CreateDiv.style.left = randomPosLeft +"px";

                        }

                        $( ".circle" ).animate({ opacity :0.0,height:100, width:100 }, 5000,bubbles);


                       }

                       bubbles();


                       });

CSS

        .circle{ width: 20px;
                 height: 20px;
                 background-color: #000;
                 border-radius: 100px; position:absolute;}

jsfiddle

     https://jsfiddle.net/krishnakamal549/u4krxq8o/

Answer 1

问题是动画中的回调会为它找到的每个元素调用。所以..第一次调用 3 次，第二次调用 9 次，第三次调用 18 次，每次调用三倍，最终你运行了数百个“气泡”实例。

你想像这样使用 promise 来做回调。

   $(".circle").animate({
     opacity: 0.0,
     height: 100,
     width: 100
   }, 5000).promise().done(bubbles);

这样，回调只会对整个动画触发一次，而不是每个元素。

FIDDLE