Fermetures et minuteries JS

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 );  //

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 );  //

Méthode deux :

var fnArr = [];
for (var i = 0; i < 10; i ++) {
(function(n){
fnArr[i] = function(){
return n;
}
})(i)
};
console.log( fnArr3 )

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(); // 'running';
Car.decelerate();
Car.decelerate();
Car.getStatus();  //'stop';
//Car.speed;  //error

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?'stop':'running');
}
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(); // 'running';
Car.decelerate();
Car.decelerate();
Car.getStatus();  //'stop';
Car.speed();  //error

É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();

É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()

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);

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);

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);
}

Code :

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

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);

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!