Maison > interface Web > tutoriel HTML > le corps du texte

Fermetures et minuteries JS

php中世界最好的语言
Libérer: 2018-03-08 15:10:29
original
2173 Les gens l'ont consulté

Cette fois, je vous présente les fermetures et les minuteries. Quelles sont les précautions lors de l'utilisation des fermetures et des minuteries JS. Voici des cas pratiques.

Qu'est-ce qu'une fermeture ? Que fait-elle ?
Une fermeture est une fonction qui peut lire les variables internes d'autres fonctions.
Fonction : 1. Vous pouvez lire les variables à l'intérieur de la fonction 2. Conservez les valeurs de ces variables en mémoire.

Quel est le rôle de setTimeout 0 ?
L'exécution de JS est basée sur un seul thread, ce qui signifie que lorsqu'un morceau de code est exécuté, d'autres codes entreront dans la file d'attente pour attendre, et les codes suivants seront être exécuté une fois le thread libre. Si un setTimeout est défini dans le code, le navigateur insérera le code dans la file d'attente des tâches au moment approprié. Si ce temps est défini sur 0, cela signifie qu'il sera immédiatement inséré dans la file d'attente, mais il ne sera pas exécuté. immédiatement. Vous devrez toujours attendre que le code précédent soit exécuté (en fait, il y a un délai, qu'il soit de 16 ms ou de 4 ms selon le navigateur). Par conséquent, setTimeout ne garantit pas le temps d'exécution. Le fait qu'il soit exécuté à temps dépend du fait que le thread JavaScript est encombré ou inactif.

Code

Quel est le résultat du code suivant ? Modifiez le code pour que fnArr[i]() génère i. Utilisez plus de deux méthodes

var fnArr = [];
for (var i = 0; i < 10; i ++) {
fnArr[i] =  function(){
return i;
};
}
console.log( fnArr3 );  //
Copier après la connexion

Code :
Première méthode :

var fnArr = [];
for (var i = 0; i < 10; i ++) {
fnArr[i] =  (function(){
var index = i;
var fn = function(){
return index
}
return fn
}());
}
console.log( fnArr3 );  //
Copier après la connexion

Méthode deux :

var fnArr = [];
for (var i = 0; i < 10; i ++) {
(function(n){
fnArr[i] = function(){
return n;
}
})(i)
};
console.log( fnArr3 )
Copier après la connexion

Utilisez une fermeture pour encapsuler un objet voiture. Vous pouvez obtenir le statut de la voiture de la manière suivante

var Car = //todo;
Car.setSpeed(30);
Car.getSpeed(); //30
Car.accelerate();
Car.getSpeed(); //40;
Car.decelerate();
Car.decelerate();
Car.getSpeed(); //20
Car.getStatus(); // &#39;running&#39;;
Car.decelerate();
Car.decelerate();
Car.getStatus();  //&#39;stop&#39;;
//Car.speed;  //error
Copier après la connexion

Code :

var Car = (function(){
var speed;
function setSpeed(n){
speed = n
}
function getSpeed(){
return console.log(speed);
}
function accelerate(){
speed +=10
return speed;
}
function decelerate(){
speed -=10
return speed;
}
function getStatus(){
return console.log(speed===0?&#39;stop&#39;:&#39;running&#39;);
}
return {
setSpeed:setSpeed,
getSpeed:getSpeed,
accelerate:accelerate,
decelerate:decelerate,
getStatus:getStatus,
}
}());
Car.setSpeed(30);
Car.getSpeed(); //30
Car.accelerate();
Car.getSpeed(); //40;
Car.decelerate();
Car.decelerate();
Car.getSpeed(); //20
Car.getStatus(); // &#39;running&#39;;
Car.decelerate();
Car.decelerate();
Car.getStatus();  //&#39;stop&#39;;
Car.speed();  //error
Copier après la connexion

Écrivez une fonction pour utiliser setTimeout pour simuler la fonction de setInterval
Code :

var i=0;
function intv(){
setTimeout(function(){
console.log(i++);
intv();
},1000);
}
intv();
Copier après la connexion

Écrivez une fonction pour calculer la granularité temporelle minimale de setTimeout
Code :

function getmin(){
var i = 0;
var start = Date.now();
var clock = setTimeout(function(){
i++;
if(i === 1000){
clearTimeout(clock);
var end = Date.now();
console.log((end-start)/i)
}
clock = setTimeout(arguments.callee,0)
},0)
}
getmin()
Copier après la connexion

Quel est le résultat de sortie du code suivant ? Pourquoi ?

var a = 1;
setTimeout(function(){
a = 2;
console.log(a);
}, 0);
var a ;
console.log(a);
a = 3;
console.log(a);
Copier après la connexion

Le résultat de sortie de ce code est 1;3;2, car un setTimeout est défini dans le code, alors le navigateur Le code sera inséré dans la file d'attente des tâches au moment approprié. Si cette heure est définie sur 0, cela signifie qu'il sera immédiatement inséré dans la file d'attente, mais il ne sera pas exécuté immédiatement. . Il doit encore attendre que le code précédent soit exécuté, donc setTimeout doit être exécuté une fois que tout le code est exécuté (function(){a = 2;console.log(a);}, 0);.

Quel est le résultat de sortie du code suivant ? Pourquoi ?

var flag = true;
setTimeout(function(){
flag = false;
},0)
while(flag){}
console.log(flag);
Copier après la connexion

n'affichera pas le résultat car setTimeout(function(){flag = false;} ,0 ) sera exécuté une fois que tout le code aura été exécuté. La valeur initiale de flag est vraie, donc while continuera à boucler et console.log(flag) ne sera pas accessible. Cependant, certains navigateurs ont des fonctions de protection contre les boucles. , il est donc possible que la sortie soit vraie```.

Quel est le résultat du code suivant ? Comment afficher Delayer : 0, Delayer : 1... (implémenté à l'aide de fermetures)

for(var i=0;i<5;i++){
setTimeout(function(){
console.log(&#39;delayer:&#39; + i );
}, 0);
console.log(i);
}
Copier après la connexion

Code :

for(var i=0;i<5;i++){
(function(i){
setTimeout(function(){
console.log(&#39;delayer:&#39; + i );
}, 0);
})(i)
console.log(i);
}
Copier après la connexion

Question brûlante

Quel est le résultat du console.log suivant ? Pourquoi?

function fn(a,b) {
console.log(b);
return {
fn:function(c){
return fn(c,a);
}
};
}
var a = fn(0);
a.fn(1);
a.fn(2);
a.fn(3);
var b = fn(0).fn(1).fn(2).fn(3);
var c = fn(0).fn(1);
c.fn(2);
c.fn(3);
Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Cas simple d'animation de réponse au clic CSS3

Comment utiliser Python pour déterminer la similarité d'une image

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!