Cette fois, je vais vous apporter un tutoriel sur la façon d'utiliser le minuteur d'animation js. Quelles sont les précautions lors de l'utilisation du minuteur d'animation js. Voici un cas pratique, jetons un coup d'œil.
D'une manière générale : toutes les présentations visuelles modifiées via js sont appelées animations ; par exemple, des boutons, des liens et d'autres éléments Commentaires interactifs.
Au sens étroit : l'effet d'animation visuelle produit en appelant continuellement des fonctions js via des minuteries pour modifier les attributs des éléments.
Timer est la technologie de base de l'animation JavaScript ;
setTimeout(), setInterval() sont bien connus et souvent utilisés dans le passé ; >Habituellement, ils font quelque chose d'auxiliaire et de cerise sur le gâteau ;
Les personnes prudentes peuvent constater un phénomène : lors du passage d'autres onglets à une page avec une animation en boucle, il y aura un décalage et un changement d'image rapide
Le problème réside dans leur mécanisme de fonctionnement interne ; Comprendre setTimeoutIl est recommandé d'utiliser le formulaire de fonction pour le premier paramètre, la forme de chaîne sera analysée deux fois et eval est le même Question ; Plus de deux paramètres, il peut y en avoir plus, voir exemple 1 Cela indique le problème, voir exemple 2 La valeur de retour est un ; entier ; clearTimeout(timer) annule le minuteur ; setInterval, clearInterval comme ci-dessus Exemple 1 :Exemple 2 :
setTimeout(function(a,b){ console.log(a+b); },1000,1,1);
Mécanisme de fonctionnement
var a = 0; function foo(){ console.log(this.a); }; var obj = { a : 2, foo:foo } setTimeout(obj.foo,100);
Raison : Rejoindre la file d'attente et bloquer l'exécution.
setTimeout(function(){ console.log(1); }); console.log(0);
Légende setInterval :
L'existence est raisonnable
Événement d'élément parent-enfant bouillonnant, l'élément parent doit être exécuté en premier, voir exemple 3 Fonction de rappeldéfinie par l'utilisateur
, généralement déclenchée avant l'action par défaut du navigateur, voir exemple 4 ; ;Exemple 4 :
<p id="myp" style="height: 100px;width: 100px;background-color: pink;"></p> <script> myp.onclick = function(){ setTimeout(function(){ alert(0); }) } document.onclick = function(){ alert(1); } </script>
Comprendre requestAnimationFrame
<input type="text" id="myInput"> <script> myInput.onkeypress = function(event) { setTimeout(function(){ myInput.value = myInput.value.toUpperCase(); }); } </script>
raf est simple et compatible
window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); }; })();
JS utilise des expressions régulières pour déterminer la date de naissance
Explication détaillée de la méthode de formatage du filtre Vue
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!