Introduction à l'utilisation des fonctions timer en js (avec code)

Cet article vous apporte une introduction à l'utilisation des fonctions de minuterie en js (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

1. setTimeout()

La fonction setTimeout est utilisée pour spécifier le nombre de millisecondes après lequel une fonction ou un certain morceau de code sera exécuté. Il renvoie un entier représentant le numéro du minuteur, qui peut être utilisé pour annuler le minuteur ultérieurement.

var timerId = setTimeout(func|code, delay)

Dans le code ci-dessus, la fonction setTimeout accepte deux paramètres. Le premier paramètre func|code est le nom de la fonction ou un morceau de code à retarder, et le deuxième paramètre delay est le numéro. de millisecondes pour retarder l'exécution.

Il est à noter que le code pour reporter l'exécution doit être mis dans setTimeout sous forme de chaîne, car le moteur utilise la fonction eval en interne pour convertir la chaîne en code. Si l'exécution différée est une fonction, vous pouvez directement mettre le nom de la fonction dans setTimeout. D'une part, la fonction eval présente des problèmes de sécurité, et d'autre part, afin de faciliter l'optimisation du code par le moteur JavaScript, la méthode setTimeout prend généralement la forme d'un nom de fonction, comme indiqué ci-dessous.

function f(){ 
 console.log(2);
}
setTimeout(f,1000);
// 或者
setTimeout(function (){
console.log(2)
},1000);

Si le deuxième paramètre de setTimeout est omis, ce paramètre est défini par défaut sur 0.

En plus des deux premiers paramètres, setTimeout permet également d'ajouter plus de paramètres. Ils seront passés dans la fonction différée (fonction de rappel).

setTimeout(function(a,b){  
console.log(a+b);
},1000,1,1);

Dans le code ci-dessus, setTimeout a 4 paramètres. Les deux derniers paramètres seront utilisés comme paramètres de la fonction de rappel lorsque la fonction de rappel sera exécutée après 1000 millisecondes.

IE9.0 et versions antérieures autorisent uniquement setTimeout à avoir deux paramètres et ne prennent pas en charge plus de paramètres. Il existe actuellement trois solutions. La première consiste à exécuter la fonction de rappel avec des paramètres dans une fonction anonyme, puis à saisir la fonction anonyme dans setTimeout.

setTimeout(function() {
  myFunc("one","two", "three");
}, 1000);

Dans le code ci-dessus, myFunc est la fonction qui veut vraiment différer l'exécution et a trois paramètres. Si vous mettez setTimeout directement, les versions inférieures d'IE ne peuvent pas prendre de paramètres, vous pouvez donc le mettre dans une fonction anonyme.

La deuxième solution consiste à utiliser la méthode bind pour lier les paramètres supplémentaires à la fonction de rappel et générer une nouvelle entrée de fonction setTimeout.

setTimeout(function(arg1){}.bind(undefined, 10), 1000);

Dans le code ci-dessus, le premier paramètre de la méthode bind n'est pas défini, ce qui signifie que celui de la fonction d'origine est lié à la portée globale, et le deuxième paramètre est le paramètre à passer dans la fonction originale. Lorsqu'il est exécuté, il renvoie une nouvelle fonction qui ne prend aucun paramètre.

La troisième solution consiste à personnaliser setTimeout et à utiliser la méthode apply pour saisir les paramètres dans la fonction de rappel.

<!--[if lte IE 9]>
<script>(function(f){
window.setTimeout =f(window.setTimeout);
window.setInterval =f(window.setInterval);
})(function(f){
return function(c,t){
var a=[].slice.call(arguments,2);
returnf(function(){
c.apply(this,a)},t)}});
</script>
<![endif]-->

En plus des problèmes de paramètres, il y a autre chose à noter à propos de setTimeout : si la fonction de rappel retardée par setTimeout est une méthode d'un objet, alors le mot clé this dans la méthode pointera vers le global l’environnement plutôt que l’objet dans lequel il a été défini.

var x = 1;
var o = { 
 x: 2,  y: function(){
    console.log(this.x);
  }
};
setTimeout(o.y,1000);

Résultat de sortie : 1

Le code ci-dessus génère 1, pas 2, ce qui signifie que celui de o.y ne pointe plus vers o, mais vers l'environnement global.

Regardez un autre exemple où les erreurs ne sont pas faciles à trouver.

function User(login) {
  this.login = login;
  this.sayHi = function(){
    console.log(this.login);
  }
}
var user = new User('John');
setTimeout(user.sayHi, 1000);

Le code ci-dessus n'affichera que non défini, car lorsque user.sayHi est exécuté, il est exécuté dans l'objet global, donc this.login ne peut pas obtenir la valeur.

Afin d'éviter ce problème, une solution consiste à exécuter user.sayHi dans une fonction.

setTimeout(function() {
  user.sayHi();
}, 1000);

Dans le code ci-dessus, sayHi est exécuté dans la portée utilisateur, pas dans la portée globale, afin que la valeur correcte puisse être affichée.

Une autre solution consiste à utiliser la méthode bind pour lier sayHi à l'utilisateur.

setTimeout(user.sayHi.bind(user), 1000);

La norme HTML 5 stipule que l'intervalle de temps minimum pour setTimeout est de 4 millisecondes. Afin d'économiser de l'énergie, le navigateur étendra l'intervalle de temps à 1 000 millisecondes pour les pages qui ne se trouvent pas dans la fenêtre actuelle. De plus, si l'ordinateur portable est alimenté par batterie, Chrome et IE 9 et versions ultérieures basculeront l'intervalle de temps sur la minuterie système, qui est d'environ 15,6 millisecondes.

2, setInterval()

L'utilisation de la fonction setInterval est exactement la même que celle de setTimeout. La seule différence est que setInterval spécifie qu'une certaine tâche doit être exécutée une fois dans un. while, ce qui signifie qu'il ne s'agit pas d'un nombre infini d'exécutions planifiées.

<input type="button" onclick="clearInterval(timer)"value="stop">
<script>
  var i = 1  
var timer = setInterval(function(){
    console.log(2);
  }, 1000);
</script>

Le code ci-dessus signifie qu'un 2 sera émis toutes les 1000 millisecondes jusqu'à ce que l'utilisateur clique sur le bouton d'arrêt.

Comme setTimeout, en plus des deux premiers paramètres, la méthode setInterval peut également accepter plus de paramètres, qui seront transmis à la fonction de rappel. Voici un exemple.

function f(){
  for (var i=0;i<arguments.length;i++){
    console.log(arguments[i]);
  }
}
setInterval(f, 1000, "Hello World");

Si la page Web ne se trouve pas dans la fenêtre (ou l'onglet) actuel du navigateur, de nombreux navigateurs limitent les tâches récurrentes spécifiées par setInteral à être exécutées au maximum une fois par seconde.

Ce qui suit est un exemple d'implémentation d'animation de page Web via la méthode setInterval.

var p = document.getElementById('somep');
var opacity = 1;
var fader = setInterval(function() 
{  opacity -= 0.1;
  if (opacity >= 0) {
    p.style.opacity = opacity;
  } else {
    clearInterval(fader);
  }}, 100);

Le code ci-dessus définit la transparence de l'élément p toutes les 100 millisecondes jusqu'à ce qu'il soit complètement transparent.

Une utilisation courante de setInterval consiste à implémenter une interrogation. Ce qui suit est un exemple d'interrogation pour savoir si la valeur de hachage de l'URL a changé.

var hash = window.location.hash;
var hashWatcher = setInterval(function() {
  if (window.location.hash != hash) {
    updatePage(); 
 }}, 1000);

setInterval spécifie l'intervalle entre le "démarrage de l'exécution" et ne prend pas en compte le temps consommé par l'exécution de chaque tâche elle-même. Donc en réalité, l'intervalle entre les exécutions sera inférieur au temps spécifié. Par exemple, setInterval spécifie une exécution toutes les 100 ms, et chaque exécution prend 5 ms. Ensuite, la deuxième exécution démarrera 95 millisecondes après la fin de la première exécution. Si une exécution prend un temps particulièrement long, disons 105 millisecondes, la prochaine exécution démarrera immédiatement après sa fin.

为了确保两次执行之间有固定的间隔，可以不用setInterval，而是每次执行结束后，使用setTimeout指定下一次执行的具体时间。

var i = 1;
var timer = setTimeout(function() {
  alert(i++);
  timer = setTimeout(arguments.callee,2000);
}, 2000);

上面代码可以确保，下一个对话框总是在关闭上一个对话框之后2000毫秒弹出。

根据这种思路，可以自己部署一个函数，实现间隔时间确定的setInterval的效果。

function interval(func, wait){
  var interv = function(){
    func.call(null);
    setTimeout(interv,wait);
  };
  setTimeout(interv,wait);
}interval(function(){
  console.log(2);
},1000);

上面代码部署了一个interval函数，用循环调用setTimeout模拟了setInterval。

HTML5标准规定，setInterval的最短间隔时间是10毫秒，也就是说，小于10毫秒的时间间隔会被调整到10毫秒。

3，clearTimeOut(),clearInterval()

setTimeout和setInterval函数，都返回一个表示计数器编号的整数值，将该整数传入clearTimeout和clearInterval函数，就可以取消对应的定时器。

var id1 = setTimeout(f,1000);
var id2 = setInterval(f,1000);
clearTimeout(id1);
clearInterval(id2);

setTimeout和setInterval返回的整数值是连续的，也就是说，第二个setTimeout方法返回的整数值，将比第一个的整数值大1。利用这一点，可以写一个函数，取消当前所有的setTimeout。

(function() {
  var gid = setInterval(clearAllTimeouts,0);
  function clearAllTimeouts(){
    var id = setTimeout(function(){}, 0);
    while (id >0) {
      if (id !==gid) {
        clearTimeout(id);
      }
      id--;
    }
  }})();

运行上面代码后，实际上再设置任何setTimeout都无效了。

下面是一个clearTimeout实际应用的例子。有些网站会实时将用户在文本框的输入，通过Ajax方法传回服务器，jQuery的写法如下。

$('textarea').on('keydown', ajaxAction);

这样写有一个很大的缺点，就是如果用户连续击键，就会连续触发keydown事件，造成大量的Ajax通信。这是不必要的，而且很可能会发生性能问题。正确的做法应该是，设置一个门槛值，表示两次Ajax通信的最小间隔时间。如果在设定的时间内，发生新的keydown事件，则不触发Ajax通信，并且重新开始计时。如果过了指定时间，没有发生新的keydown事件，将进行Ajax通信将数据发送出去。

这种做法叫做debounce（防抖动）方法，用来返回一个新函数。只有当两次触发之间的时间间隔大于事先设定的值，这个新函数才会运行实际的任务。假定两次Ajax通信的间隔不小于2500毫秒，上面的代码可以改写成下面这样。

$('textarea').on('keydown', debounce(ajaxAction, 2500))

利用setTimeout和clearTimeout，可以实现debounce方法，该方法用于防止某个函数在短时间内被密集调用。具体来说，debounce方法返回一个新版的该函数，这个新版函数调用后，只有在指定时间内没有新的调用，才会执行，否则就重新计时。

function debounce(fn, delay){
  var timer = null;// 声明计时器
  return function(){
    var context =this;
    var args = arguments;
    clearTimeout(timer); 
   timer = setTimeout(function(){
      fn.apply(context,args); 
   }, delay);
  };
}

// 用法示例

var todoChanges = _.debounce(batchLog, 1000);
Object.observe(models.todo, todoChanges);

现实中，最好不要设置太多个setTimeout和setInterval，它们耗费CPU。比较理想的做法是，将要推迟执行的代码都放在一个函数里，然后只对这个函数使用setTimeout或setInterval。

4，运行机制

setTimeout和setInterval的运行机制是，将指定的代码移出本次执行，等到下一轮EventLoop时，再检查是否到了指定时间。如果到了，就执行对应的代码；如果不到，就等到再下一轮Event Loop时重新判断。

这意味着，setTimeout和setInterval指定的代码，必须等到本轮EventLoop的所有同步任务都执行完，再等到本轮EventLoop的“任务队列”的所有任务执行完，才会开始执行。由于前面的任务到底需要多少时间执行完，是不确定的，所以没有办法保证，setTimeout和setInterval指定的任务，一定会按照预定时间执行。

setTimeout(someTask, 100);
veryLongTask();

上面代码的setTimeout，指定100毫秒以后运行一个任务。但是，如果后面的veryLongTask函数（同步任务）运行时间非常长，过了100毫秒还无法结束，那么被推迟运行的someTask就只有等着，等到veryLongTask运行结束，才轮到它执行。

这一点对于setInterval影响尤其大。

setInterval(function () {
  console.log(2);
}, 1000);
(function () {
  sleeping(3000);
})();

上面的第一行语句要求每隔1000毫秒，就输出一个2。但是，第二行语句需要3000毫秒才能完成，请问会发生什么结果？

结果就是等到第二行语句运行完成以后，立刻连续输出三个2，然后开始每隔1000毫秒，输出一个2。也就是说，setIntervel具有累积效应，如果某个操作特别耗时，超过了setInterval的时间间隔，排在后面的操作会被累积起来，然后在很短的时间内连续触发，这可能或造成性能问题（比如集中发出Ajax请求）。

5， setTimeout(f,0)

setTimeout的作用是将代码推迟到指定时间执行，如果指定时间为0，即setTimeout(f, 0)，那么会立刻执行吗？

答案是不会。因为上一段说过，必须要等到当前脚本的同步任务和“任务队列”中已有的事件，全部处理完以后，才会执行setTimeout指定的任务。也就是说，setTimeout的真正作用是，在“消息队列”的现有消息的后面再添加一个消息，规定在指定时间执行某段代码。setTimeout添加的事件，会在下一次Event Loop执行。

setTimeout(f, 0)将第二个参数设为0，作用是让f在现有的任务（脚本的同步任务和“消息队列”指定的任务）一结束就立刻执行。也就是说，setTimeout(f, 0)的作用是，尽可能早地执行指定的任务。而并不是会立刻就执行这个任务。

setTimeout(function () {
  console.log('hello world！');
}, 0);

上面代码的含义是，尽可能早地显示“hello world！”。

setTimeout(f, 0)指定的任务，最早也要到下一次EventLoop才会执行。请看下面的例子。

setTimeout(function() {
  console.log("Timeout");
}, 0)
function a(x) {
  console.log("a()开始运行");
  b(x);
  console.log("a()结束运行");
}
function b(y) {
  console.log("b()开始运行");
  console.log("传入的值为" + y);
  console.log("b()结束运行");
}
console.log("当前任务开始");
a(42);
console.log("当前任务结束");

输出结果如下：

// 当前任务开始， a() 开始运行， b() 开始运行， 传入的值为42，b() 结束运行， a() 结束运行， 当前任务结束

上面代码说明，setTimeout(f, 0)必须要等到当前脚本的所有同步任务结束后才会执行。

即使消息队列是空的，0毫秒实际上也是达不到的。根据HTML5标准，setTimeout推迟执行的时间，最少是4毫秒。如果小于这个值，会被自动增加到4。这是为了防止多个setTimeout(f, 0)语句连续执行，造成性能问题。

另一方面，浏览器内部使用32位带符号的整数，来储存推迟执行的时间。这意味着setTimeout最多只能推迟执行2147483647毫秒（24.8天），超过这个时间会发生溢出，导致回调函数将在当前任务队列结束后立即执行，即等同于setTimeout(f, 0)的效果。

6 ，正常任务与微任务

正常情况下，JavaScript的任务是同步执行的，即执行完前一个任务，然后执行后一个任务。只有遇到异步任务的情况下，执行顺序才会改变。

这时，需要区分两种任务：正常任务（task）与微任务（microtask）。它们的区别在于，“正常任务”在下一轮EventLoop执行，“微任务”在本轮Event Loop的所有任务结束后执行。

console.log(1);
setTimeout(function() {
  console.log(2);
}, 0);
Promise.resolve().then(function() {
  console.log(3);
}).then(function() {
  console.log(4);
});
console.log(5);

输出结果如下：

// 1， 5，3，4， 2

上面代码的执行结果说明，setTimeout(fn, 0)在Promise.resolve之后执行。

这是因为setTimeout语句指定的是“正常任务”，即不会在当前的Event Loop执行。而Promise会将它的回调函数，在状态改变后的那一轮Event Loop指定为微任务。所以，3和4输出在5之后、2之前。

正常任务包括以下情况。

•   setTimeout

•   setInterval

•   setImmediate

•   I/O

•   各种事件（比如鼠标单击事件）的回调函数

微任务目前主要是process.nextTick和 Promise 这两种情况。

相关推荐：

 

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!