JQuery Divs正在倍增

Question

我有一个jQuery函数,它将在屏幕上的某个位置随机放置一组3个div.该.faceDIV,这里面是.left eyeDIV和.right eye股利.它淡入,淡出,删除$(this),并再次调用该函数.一切正常.

我目前的问题是我想让多个face类出现并消失,所以我将所有内容放入for循环中.不幸的是,它不再删除div.因此,第一次迭代创建2个div,下一次迭代创建4,然后是8,并且永远保持加倍.

(我将延迟设置为30000以使其非常慢.原来延迟时间较短但是这会使浏览器崩溃.)

知道我做错了什么吗？

(function makeDiv(){

  for (var x=0; x<2; x++) {

  var posx = Math.floor(Math.random()*(60+1)+10);
  var posy = Math.floor(Math.random()*(60+1)+10);

  $face$x = $('<div><div class="left eye"></div><div class="right eye"></div></div>').css({
        'position':'absolute',
        'left':posx+'%',
        'top':posy+'%',
        'display':'none'
    }).addClass( "face" ).appendTo( 'body' ).fadeIn(100).delay(30000).fadeOut(200, function(){
       $(this).remove();//

       makeDiv(); 

    });  }
}) 

();

代码笔示例

Answer 1

我认为问题在于，由于您多次调用该函数（var x=0; x<2; x++），并且它是递归的，因此最终会出现溢出。这意味着每次它调用自身时，它都会再循环几次，并且每次这些循环都会调用更多循环，等等。

不太确定预期的结果是什么，但您应该将递归包装在一个函数中，并为要创建的每个面单独调用它。如果你想在那里延迟，你可以放置一个 setTimeout() 。下面创建任意数量的面并同时将它们淡入和淡出，由“x<5”值设置：

(function makeDiv(){

  for (var x=0; x<5; x++) {
    what();
  }

 function what() {

  var posx = Math.floor(Math.random()*(60+1)+10);
  var posy = Math.floor(Math.random()*(60+1)+10);

  $face$x = $('<div><div class="left eye"></div><div class="right eye"></div></div>').css({
        'position':'absolute',
        'left':posx+'%',
        'top':posy+'%',
        'display':'none'
    }).addClass( "face" ).appendTo( 'body' ).fadeIn(100).delay(3000).fadeOut(200, function(){
      this.remove();
       what(); 
    }); 
  }
})();