Explication détaillée de la façon de créer et d'utiliser un exemple de code de minuterie avancé en 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 le minuteur

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, donnons 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, un intervalle de temps sera ignoré en même temps. Un code de minuterie est en cours d'exécution.
On peut également tirer des conclusions du code suivant :

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

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

Un nouveau timer sera créé à chaque exécution de la fonction, et le deuxième setTimeout L'appel utilise arguments.callee pour obtenir une référence à la fonction en cours d'exécution et définir une autre minuterie 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 cadres traditionnels atteignent généralement un timing répétitif de cette manière.

Limitation des fonctions

Les minuteries ne sont pas seulement utilisées pour la synchronisation, mais peuvent également être utilisées 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 p = document.getElementByTagName(body);
 p.style.height = p.offsetWidth +'px';
}
//使用情况;
function resizep(){
 var p = document.getElementByTagName(body);
 p.style.height = p.offsetWidth +'px';
}
window.onresize = function(){
 throttle(resizep);
};
//只要代码是周期性执行的，都应该使用节流。

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

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!