javascript - JQuery Div 成倍增加

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

您的主要问题是每次调用方法 ma​​keDiv() 都会向同一方法注册 2 个递归调用(因为内部循环)。因此，第一个调用将对该方法的两次调用放入队列中，队列中的这两个调用中的每一个都会创建另外两个调用，这就是它们成倍增加的原因。我已经给你举了一个例子，说明我将如何做与你想要的类似的事情，主要思想是使用 setInterval() 每 X 毫秒创建一个新的 face，然后这个新创建的 face 将在随机延迟时间后淡出并移除。希望对您有所帮助。

$(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>