JQuery Divs multiplions

voix
6

J'ai une fonction avec jQuery qui placera au hasard un ensemble de 3 divs quelque part sur l'écran. Le .facediv, à l' intérieur duquel est .left eyediv et un .right eyediv. Il apparaît en fondu, se fane dehors, enlève la $(this)et appelle à nouveau la fonction. Tout ce qui fonctionne.

Mon problème actuel est que je voudrais avoir plusieurs facecours qui apparaissent et disparaissent, donc je mets tout dans une boucle. Malheureusement, il ne supprime plus les divs. La première itération crée 2 divs, la prochaine itération crée 4, puis 8, et continue à doubler pour toujours.

(Je mets le délai à 30000 pour le rendre vraiment lent. A l'origine le retard était plus court mais le navigateur est écrasé.)

Toute idée de ce que je l'ai fait de mal?

(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 stylo Exemple

Créé 20/10/2018 à 02:48
source utilisateur
Dans d'autres langues...                            


2 réponses

voix
2

Votre principal problème est que chaque appel à la méthode makeDiv () Le registre 2 appels récursifs à cette même méthode ( en raison de la boucle à l' intérieur). Ainsi, le premier appel met sur la file d' attente de deux appels à cette méthode, et chacun de ces deux appels sur la file d' attente va créer deux autres appels, c'est la raison pour laquelle ils se multiplient. Je vous ai fait un exemple de la façon dont je vais faire quelque chose de semblable à ce que vous veut, l'idée principale est de créer un nouveau visage toutes les millisecondes X en utilisant setInterval () , alors ce nouveau créé visage seront fanées et enlevée après un délai aléatoire temps. Espérons que cela vous aide.

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

Créé 20/10/2018 à 04:20
source utilisateur

voix
1

Je crois que le problème est que, puisque vous appelez la fonction plusieurs fois (var x = 0; x <2; x ++), et il est récursive, vous allez finir avec un débordement par la suite. Signification à chaque fois qu'il s'appelle boucles quelques fois, et chaque fois que les boucles les appellent plusieurs boucles, etc.

Pas tout à fait sûr de ce que le résultat escompté est, mais vous devriez tout simplement envelopper la récursion dans une fonction et l'appeler séparément pour chaque face que vous voulez créer. Vous pouvez mettre un setTimeout () si vous voulez un retard là-dedans. Le ci-dessous crée un certain nombre de visages et les fane simulatenously dedans et dehors, fixé par la valeur « 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(); 
    }); 
  }
})();
Créé 20/10/2018 à 03:31
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more