Question

我有一个jQuery函数，它将在屏幕上的某处随机放置3个div。 .face div，其中是.left eye div和.right eye div。它淡入，淡出，删除$(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(); 

    });  }
}) 

();

Code Pen Example

Answer 1

您的主要问题是，每次对方法 makeDiv（）的调用都会注册对同一方法的2个递归调用（由于内部循环）。因此，第一个调用将两次调用此方法放在队列中，并且这两个调用中的每个调用都会再创建两个调用，这就是它们相乘的原因。我已经向您提供了一个示例，说明我将如何执行与您想要的操作类似的操作，其主要思想是使用 setInterval（）每X毫秒创建一个新的面部，然后经过随机延迟时间后，此新创建的面部会淡出并删除。希望对您有帮助。

$(document).mousemove(function(event)
{
    var eye = $(".eye");
    var x = (eye.offset().left) + (eye.width() / 2);
    var y = (eye.offset().top) + (eye.height() / 2);
    var rad = Math.atan2(event.pageX - x, event.pageY - y);
    var rot = (rad * (180 / Math.PI) * -1) + 90;
    
    eye.css({
        '-webkit-transform': 'rotate(' + rot + 'deg)',
        '-moz-transform': 'rotate(' + rot + 'deg)',
        '-ms-transform': 'rotate(' + rot + 'deg)',
        'transform': 'rotate(' + rot + 'deg)'
    });
});

$(document).ready(function()
{
    createFace();
    setInterval(createFace, 5000);
});

function createFace()
{  
    var posx = Math.floor(Math.random()*(60+1)+10);
    var posy = Math.floor(Math.random()*(60+1)+10);
    var delayTime = Math.random() * 10000 + 10000;
  
    $('<div class="face"><div class="left eye"></div><div class="right eye"></div></div>')
    .css({
        'position':'absolute',
        'left':posx+'%',
        'top':posy+'%',
        'display':'none'
    })
    .appendTo('body')
    .fadeIn(100)
    .delay(delayTime)
    .fadeOut(500, function(){$(this).remove();});
}

body {
  background-color: black;
  text-align: center;
}

.face {
  position: relative;
  width: 7em;
  border: white 1px solid;
  display: inline-block;
}

.left {
  background-color: green;
}

.right {
  background-color: yellow;
}

.eye {
  border-radius: 25px;
  margin-top: 1em;

  height: 50px;
  width: 50px;
  display: inline-block;
  text-align: center;
  position: relative;
}

.eye.animate {
  transition: all 100ms;
}

.eye:after {
  content: " ";
  bottom: 25px;
  right: 10px;
  position: absolute;
  width: 5px;
  height: 5px;
  background: pink;
  border-radius: 15px;
}

#animate {
  outline: none;
  background: #FFF;
  border: solid thin #000;
  padding: 15px;
  margin: 5px;
  position: absolute;
  top: 5px;
  right: 5px;
  color: #000;
  transition: all 300ms;
  cursor: pointer;
}

#animate:hover {
  background: #000;
  color: #FFF;
  border: solid thin white;
}

.spookyEyes {
  background-color: white;
  width: 50px;
  height: 50px;
}

.arrowUp {
  width: 0; 
  height: 0; 
  //background-color: pink;
  border-left: 10em solid transparent;
  border-right: 10em solid transparent;
  
  border-bottom: 10em solid white;
  transform: rotate(20deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="face" style="display:none;">
  <div class="left eye"></div>
  <div class="right eye"></div>
</div>
  
<div class="spooekyEyes"></div>
<div class="arreeowUp"></div>

Answer 2

我相信问题在于，由于您多次调用该函数（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(); 
    }); 
  }
})();

jQuery Divs正在乘法

2 个答案: