Exemple de code de minuterie Javascript

1. Qu'est-ce qu'une minuterie

JS fournit des méthodes natives pour retarder l'exécution d'un certain morceau de code. Présentons-le brièvement ci-dessous

setTimeout : Définition d'une minuterie, exécuter une fonction ou un segment de code une fois après l'expiration du minuteur

var timeoutId = window.setTimeout(func[, delay, param1, param2, ...]);
var timeoutId = window.setTimeout(code[, delay]);

• timeoutId : ID du minuteur

• func : fonction exécutée après delay

• code : Chaîne de code exécutée après un délai Il n'est pas recommandé d'utiliser le principe de eval()

• delay : Temps de retard (unité : millisecondes), la valeur par défaut est 0

• param1, param2 : paramètres transmis à la fonction de retard, prise en charge d'IE9 et supérieur

setInterval : Appeler à plusieurs reprises une fonction ou un segment de code à un intervalle de temps fixe

var intervalId = window.setInterval(func, delay[, param1, param2, ...]);
var intervalId = window.setInterval(code, delay);

• intervalId : ID de l'opération répétée

• func : fonction appelée avec retard

• code : segment de code

• delay : temps de retard, pas de valeur par défaut

setImmediate : exécute la fonction spécifiée immédiatement après que le navigateur ait complètement terminé l'opération en cours (implémentée uniquement dans IE10 et Node 0.10), similaire à setTimeout(func, 0)

var immediateId = setImmediate(func[, param1, param2, ...]);
var immediateId = setImmediate(func);

• immediateId : ID de la minuterie

• func : rappel

requestAnimationFrame : Une API spécialement conçue pour réaliser une animation d'image haute performance, mais le temps de retard ne peut pas être spécifié, mais est déterminé en fonction de la fréquence de rafraîchissement (image) du navigateur

var requestId = window.requestAnimationFrame(func);

• func: callback

Ce qui précède présente brièvement quatre minuteries JS, et cet article présentera principalement les deux plus couramment utilisées : setTimeout et setInterval.

2. Pour donner un exemple

• Utilisation de base

// 下面代码执行之后会输出什么？
var intervalId, timeoutId;

timeoutId = setTimeout(function () {
    console.log(1);
}, 300);

setTimeout(function () {
    clearTimeout(timeoutId);
    console.log(2);
}, 100);

setTimeout('console.log("5")', 400);

intervalId = setInterval(function () {
    console.log(4);
    clearInterval(intervalId);
}, 200);

// 分别输出: 2、4、5

• setInterval et La différence entre setTimeout ?

// 执行在面的代码块会输出什么？
setTimeout(function () {
    console.log('timeout');
}, 1000);

setInterval(function () {
    console.log('interval')
}, 1000);

// 输出一次 timeout，每隔1S输出一次 interval

/*--------------------------------*/

// 通过setTimeout模拟setInterval 和 setInterval有啥区别么？
var callback = function () {
    if (times++ > max) {
        clearTimeout(timeoutId);
        clearInterval(intervalId);
    }

    console.log('start', Date.now() - start);
    for (var i = 0; i <p>S'il s'agit de <code>setTimeout</code> et <code>setInterval</code>, ils ne diffèrent que par le nombre d'exécutions, <code>setTimeout</code> une fois et <code>setInterval</code>n fois. </p><p>La différence entre <code>setTimeout</code> et <code>setInterval</code> simulés par <code>setInterval</code> est que : <code>setTimeout</code> n'appellera le minuteur suivant <strong> qu'une fois le rappel </strong> terminé, tandis que <code>setInterval</code> peu importe de l'état d'exécution de la fonction de rappel, lorsque <strong> atteint l'heure spécifiée, un événement </strong> qui exécute le rappel sera inséré dans la file d'attente des événements, vous devez donc prendre en compte cette fonctionnalité de <code>setInterval</code> lors du choix de la minuterie méthode. Cela aura-t-il un impact sur votre code d’entreprise ? Qui est le plus rapide, </p>

• setTimeout(func, 0) ou setImmediate(func) ? (J'ai écrit ce test juste par curiosité)

console.time('immediate');
console.time('timeout');

setImmediate(() => {
    console.timeEnd('immediate');
});

setTimeout(() => {
    console.timeEnd('timeout');
}, 0);

Le test de Node.JS v6.7.0 a révélé que setTimeout avait été exécuté plus tôt

• Questions d'entretien

Quel est le résultat après avoir exécuté le code suivant ?

// 题目一
var t = true;
 
setTimeout(function(){
    t = false;
}, 1000);
 
while(t){}
 
alert('end');

/*--------------------------------*/

// 题目二
for (var i = 0; i <p><strong><em>Les réponses aux questions recevront une réponse plus tard</em></strong></p><h2>3. Le principe de fonctionnement de la minuterie JS </h2><p> Dans l'explication ci-dessus Avant de répondre à la question, comprenons d'abord comment fonctionne la minuterie. Ici, nous utiliserons un exemple de Comment fonctionnent les minuteries JavaScript pour expliquer le principe de fonctionnement de la minuterie. Cette image est une version simple du diagramme schématique. </p><p><img src="https://img.php.cn/upload/article/000/000/013/14c7285aa427c9064d4fe8d1ea51338d-0.png"    style="max-width:90%"  style="max-width:90%" title="Exemple de code de minuterie Javascript" alt="Exemple de code de minuterie Javascript"></p><p>Dans l'image ci-dessus, le nombre de gauche représente le temps en millisecondes ; le texte de gauche représente qu'une fois une opération terminée, le navigateur demandera ce qu'il y a dedans. la file d'attente actuelle en attente d'exécution. L'opération ; le carré bleu représente le bloc de code en cours d'exécution ; le texte à droite représente les événements asynchrones qui se produisent pendant l'exécution du code. Le déroulement général de la figure est le suivant : </p>

• Lorsque le programme démarre, un bloc de code JS commence à s'exécuter, et le temps d'exécution est d'environ 18 ms. Lors de l'exécution, 3 événements asynchrones. sont déclenchés, dont un setTimeout, événement de clic de souris, setInterval

• Le premier setTimeout s'exécute en premier, avec un délai de 10 ms. Plus tard, l'événement de souris apparaît et le. le navigateur l'insère dans la file d'attente des événements. La fonction de rappel de clic setInterval s'exécutera plus tard. Après 10 ms, setTimeout insère le rappel setTimeout dans la file d'attente des événements

• lors du premier. le bloc de code est exécuté, le navigateur vérifie quels événements sont en attente dans la file d'attente et extrait le code en haut de la file d'attente pour l'exécuter

• Lorsque le navigateur gère le rappel du clic de souris, setInterval vérifie à nouveau Lorsque le délai est atteint, il insérera à nouveau un rappel d'intervalle dans la file d'attente des événements. À l'avenir, un rappel sera inséré dans la file d'attente après chaque délai spécifié

  .

• 后面浏览器将在执行完当前队头的代码之后，将再次取出目前队头的事件来执行

这里只是对定时器的原理做一个简单版的描述，实际的处理过程比这个复杂。

四、题目答案

好啦，我们现在再来看看上面的面试题的答案。

第一题

alert永远都不会执行，因为JS是单线程的，且定时器的回调将在等待当前正在执行的任务完成后才执行，而while(t) {}直接就进入了死循环一直占用线程，不给回调函数执行机会

第二题

代码会输出 5 5 5 5 5，理由同上，当i = 0时，生成一个定时器，将回调插入到事件队列中，等待当前队列中无任务执行时立即执行，而此时for循环正在执行，所以回调被搁置。当for循环执行完成后，队列中存在着5个回调函数，他们的都将执行console.log(i)的操作，因为当前js代码上中并没有使用块级作用域，所以i的值在for循环结束后一直为5，所以代码将输出5个5

第三题

这个问题涉及到this的指向问题，由setTimeout()调用的代码运行在与所在函数完全分离的执行环境上. 这会导致这些代码中包含的this关键字会指向window (或全局)对象，window对象中并不存在shout方法，所以就会报错，修改方案如下:

var obj = {
    msg: 'obj',
    shout: function () {
        alert(this.msg);
    },
    waitAndShout: function() {
        var self = this; // 这里将this赋给一个变量
        setTimeout(function () {
            self.shout();
        }, 0);    
    }
};
obj.waitAndShout();

五、需要注意的点

• setTimeout有最小时间间隔限制，HTML5标准为4ms，小于4ms按照4ms处理，但是每个浏览器实现的最小间隔都不同

• 因为JS引擎只有一个线程，所以它将会强制异步事件排队执行

• 如果setInterval的回调执行时间长于指定的延迟，setInterval将无间隔的一个接一个执行

• this的指向问题可以通过bind函数、定义变量、箭头函数的方式来解决

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!