0
votes

Comment utiliser SettimeOut et être capable d'obtenir la classe ou l'ID CSS?

J'essaie de colorer certains rectangles, mais je veux le faire avec un deuxième intervalle pour que je puisse les voir changer de couleur un par un.

J'ai essayé d'utiliser SettimeOut (); et ont examiné de nombreuses réponses différentes dans le débordement de pile, mais je n'ai pas été en mesure de le faire fonctionner, actuellement lorsque j'utilise ce code, le délai semble ajouter, puis tous les blocs changent de couleur en même temps. xxx

J'utilise le code ci-dessous pour générer le code xxx

et c'est ce que mon HTML ressemble à < Pré> xxx

javascript settimeout

2 commentaires

Pouvez-vous mettre votre HTML aussi

Pourquoi ne pas faire une fonction qui définit une couleur d'un élément, stockez le carré actuel dans une variable - et appelez la fonction pour régler le premier carré, à la fin de laquelle vous aurez SETTITimeOut et dans le rappel de celui-ci. J'appellerais la même fonction pour le prochain carré. Une récursion essentiellement.

3 Réponses :

0
votes

à cause du JS EventLoop Tous les fonctions SetTimeout sont en cours d'exécution (presque) en même temps (en raison de la propriété à thread unique de JS, ils sont en cours d'exécution. Un autre, mais vous avez gagné).

Vous devez donc personnaliser délai variable pour chacun des Settimeout s de Pour les faire courir avec le délai de 500ms après l'appel de la fonction précédent.

ci-dessous J'ai essayé de modifier une partie du code au travail: xxx donc Settimeout s sont exécutés dans la séquence ci-dessous:

0.5S 1s ...

  Vous pouvez en savoir plus sur  EventLoop  à partir d'ici:  boucle d'événement JavaScript expliquée



                                                                    
                                    
                                    
                                        2 commentaires
                                        
                                                                                            
                                                    Les appels de fonctions dans la boucle d'événement sont traités l'un après l'autre (JS est à une seule-filetée, de sorte que de nombreuses fonctions fonctionnent en même temps). De plus, le temps mentionné à Settimeout est la période la plus rapide dans laquelle la fonction peut fonctionner.                                                
                                                
                                                                                            
                                                    @Rahulpadalkar merci pour l'explication. J'ajoute le  un seul thread  à ma description. Et pour le temps plus rapide que vous avez mentionné, j'ai utilisé le mot  au moins après 500ms  pour la décrire. Merci d'avoir mentionné quand même.


                        
                                            
                            
                                
                                    1
 votes
                                
                            
                            
                                
                                     Je pense que c'est ce que vous recherchez, j'ai ajouté un script pour générer la grille depuis que vous ne l'avez pas fourni, vous pouvez manipuler l'animation en ajoutant / en supprimant  x  code> et  Y  code> à partir de la fonction  code> Timeout  code> et modifiez également  100  code> ms in  y * x * 100  code>. 
  p> 

<div id="container">
</div>

                                

                                                                    
                                    
                                    
                                        2 commentaires
                                        
                                                                                            
                                                    Il est élégant que vous avez gardé le code OP et que vous avez simplement multiplié le temps de snooze, je l'aime :)                                                
                                                
                                                                                            
                                                    Merci, mieux de garder les changements le moins aussi peu que possible;) Merci! Votre réponse est bonne aussi que j'aurais aussi avancé la vôtre aussi, mais j'ai déjà atteint ma limite de upvote pour aujourd'hui! peut être demain.                                                
                                                
                                                                                    
                                    
                                                            
                        
                        
                                            
                            
                                
                                    1
 votes
                                
                            
                            
                                
                                     Vous demandez un rappel 10x10 en même temps, c'est pourquoi tous les carrés sont changés en même temps. En savoir plus sur la façon dont  Settimeout ()  code> fonctionne, c'est un excellent  vidéo  à ce sujet. 
 Une solution consiste à utiliser le  setInterval ()  code>, ce n'est pas vraiment une norme d'utilisation de l'espace dans le  ID  code> champ, donc j'ai utilisé le soulignement à la place.  p> 
  p> 


<div class="line">
  <div id="0_0"></div>
  <div id="0_1"></div>
  <div id="0_2"></div>
</div>
<div class="line">
  <div id="1_0"></div>
  <div id="1_1"></div>
  <div id="1_2"></div>
</div>
<div class="line">
<div id="2_0"></div>
<div id="2_1"></div>
<div id="2_2"></div>
</div>

                                

                                                                    
                                    
                                    
                                        0 commentaires