Explication détaillée des compétences avancées javascript de timer_javascript

setTimeout() et setInterval() peuvent être utilisés pour créer des minuteries, et leur utilisation de base ne sera pas présentée ici. Ici, nous introduisons principalement la file d'attente de code de javascript. Aucun code en JavaScript n'est exécuté immédiatement, il est exécuté dès que le processus est inactif. Par conséquent, l'heure définie dans le minuteur ne signifie pas que l'heure d'exécution doit correspondre, mais cela signifie que le code sera ajouté à la file d'attente pour attendre après l'intervalle de temps spécifié. S'il n'y a rien d'autre dans la file d'attente à ce moment-là, alors ce code sera exécuté et il apparaîtra comme si le code avait été exécuté au moment précis spécifié. Certains problèmes vont donc surgir.

Répéter la minuterie

Habituellement, nous utilisons la méthode setInterval pour exécuter à plusieurs reprises un certain morceau de code au même intervalle de temps. Mais l'utilisation de cette méthode pose deux problèmes : le premier est que certains intervalles seront ignorés ; le deuxième est que l'intervalle entre les exécutions de code pour plusieurs temporisateurs peut être plus petit que prévu.
Ici, prenons un exemple : si un gestionnaire d'événements onclick utilise setInterval pour définir une minuterie répétitive avec un intervalle de 200 ms, si le gestionnaire d'événements prend 300 ms pour se terminer, il ignorera un intervalle de temps et exécutera un code de minuterie.
On peut également obtenir la conclusion grâce au code suivant :

//重复定时器
var i =0;
setInterval(function(){
 //如果事件处理时间长于间隔时间
 i++;
 for(var j=0;j<100000000;j++){}
 document.write(i+' ');
},100);
//可以明显感觉到时间间隔不相等
为了避免这种时间间隔的问题，我们可以采用链式调用setTimeout方法来取代setInterval。

//可以采用链式调用setTimeout来取代setInterval
var i = 0;
setTimeout(function(){
 //处理内容
 i++;
 for(var j=0;j<100000000;j++){}
 document.write(i+' ');
 //
 setTimeout(arguments.callee,100);
},100);
//这样处理效果明显好多了。

Un nouveau timer est créé à chaque fois que la fonction est exécutée. Le deuxième appel setTimeout utilise arguments.callee pour obtenir une référence à la fonction actuellement exécutée et définir un autre timer pour celle-ci. Ceci est fait de sorte qu'aucun nouveau code de minuterie ne soit inséré dans la file d'attente jusqu'à ce que le code de minuterie précédent soit exécuté, garantissant qu'il n'y aura aucun intervalle manquant et qu'au moins le temps spécifié sera attendu avant que le code de minuterie suivant ne soit exécuté. intervalles pour éviter des courses continues. On peut dire que cela fait d'une pierre deux coups. De nos jours, les animations dans les frameworks grand public implémentent généralement un timing répété de cette manière.

Limitation des fonctions

La minuterie n'est pas seulement utilisée pour le chronométrage, mais peut également être utilisée pour soulager la pression sur le navigateur. Certains calculs et traitements dans le navigateur sont beaucoup plus coûteux que d'autres. Par exemple, les opérations DOM nécessitent plus de mémoire et de temps CPU. L'utilisation continue d'un trop grand nombre d'opérations DOM peut entraîner le blocage ou même le crash du navigateur.
L'idée de base de la limitation des fonctions est que certains codes ne peuvent pas être exécutés de manière continue et répétée sans interruption. La première fois que la fonction est appelée, un minuteur est créé pour exécuter le code après un intervalle spécifié. Lorsque la fonction est appelée une deuxième fois, elle efface la minuterie précédente et en définit une. Le but est d'exécuter à nouveau la fonction après l'arrêt de la demande d'exécution de la fonction pendant un certain temps.
Le code est le suivant :

//再来谈谈函数节流
function throttle(method,context){
 clearTimeout(method.tId);
 method.tId = setTimeout(function(){
  method.call(context);
 },100);
}
//该函数接受两个参数，第一个是要执行的函数，第二个是作用域。
//使用方法demo
//未使用情况：
window.onresize = function(){
 var div = document.getElementByTagName(body);
 div.style.height = div.offsetWidth +'px';
}
//使用情况;
function resizeDiv(){
 var div = document.getElementByTagName(body);
 div.style.height = div.offsetWidth +'px';
}
window.onresize = function(){
 throttle(resizeDiv);
};
//只要代码是周期性执行的，都应该使用节流。

Cela ne donne pas une sensation agréable à l'utilisateur, mais cela réduit beaucoup de pression sur le navigateur. La limitation des fonctions est également l'une des techniques couramment utilisées dans de nombreux frameworks.

Ce qui précède est une introduction pertinente à la minuterie avancée JavaScript. J'espère que cela sera utile à l'apprentissage de chacun.