javascript settimeout annuler

JavaScript est un langage de programmation populaire qui peut être utilisé pour écrire des éléments interactifs et de la logique dans des applications Web. Parmi eux, setimeout est une fonction intégrée à JavaScript, qui peut exécuter le code spécifié après un certain délai. Cependant, il est parfois nécessaire d'annuler le timer setTimeout pendant l'exécution. Cet article explique comment annuler le minuteur setTimeout à l'aide du langage JavaScript.

1. Aperçu de base de la fonction setTimeout

Avant de présenter comment annuler setTimeout, comprenons d'abord l'utilisation et les concepts de base de la fonction setTimeout.

La fonction setTimeout est une fonction globale en JavaScript. Sa fonction est de retarder l'exécution du code spécifié après une certaine période de temps. L'utilisation spécifique est la suivante :

setTimeout(function(){
  //执行的代码
},延迟的毫秒数)

Parmi eux, la fonction représente la fonction à retarder, et le nombre de millisecondes à retarder est un paramètre de type numérique, indiquant le temps à retarder, en millisecondes. Par exemple, si vous souhaitez exécuter une fonction après 500 millisecondes, vous pouvez utiliser le code suivant :

setTimeout(function(){
  console.log('延迟500毫秒后执行的代码。')
},500)

2. Comment utiliser la fonction clearTimeout pour annuler le timer setTimeout

Lorsque le délai dans la fonction setTimeout est trop long ou incertain, vous devrez peut-être annuler la minuterie pendant l'exécution. À ce stade, vous pouvez utiliser la fonction clearTimeout de l'objet window. Cette fonction peut annuler la pause de la fonction setTimeout qui n'a pas encore été exécutée.

La fonction clearTimeout est utilisée comme suit :

var timer = setTimeout(function(){
  console.log('延迟执行的代码。')
},3000)

//取消计时器
clearTimeout(timer);

Dans l'exemple de code ci-dessus, une variable nommée timer est définie pour stocker le dernier timer, puis la fonction clearTimeout est utilisée pour annuler ce timer. De cette façon, si vous devez annuler le délai avant d'exécuter le code, vous pouvez utiliser la fonction clearTimeout.

3. Le minuteur de setTimeout peut être annulé, mais le code interne ne peut pas être arrêté.

Il convient de noter que le minuteur peut être annulé via la fonction clearTimeout, mais le code exécuté dans le minuteur ne peut pas être arrêté. Cela signifie que si vous définissez une fonction qui est toujours exécutée dans la fonction setTimeout, même si le minuteur est annulé, la fonction continuera à s'exécuter jusqu'à ce qu'elle soit terminée.

Par exemple, dans l'exemple de code suivant, une fonction setInterval est définie et exécutée une fois par seconde Même si la minuterie est annulée, la fonction s'arrêtera après s'être exécutée une fois.

var timer = setTimeout(function(){
  setInterval(function(){
    console.log('每秒执行一次的代码。')
  },1000)
},5000)

//取消计时器
clearTimeout(timer)

4. Application pratique de setTimeout et clearTimeout

Jetons maintenant un coup d'œil à l'application pratique de setTimeout et clearTimeout.

Dans les applications pratiques, les fonctions setTimeout et clearTimeout sont généralement utilisées dans des scénarios tels que le code qui doit être retardé, le code qui doit être interrogé et les commentaires des utilisateurs. Par exemple :

1. Exécution retardée du code

Dans certains scénarios qui nécessitent d'attendre un certain temps avant l'exécution, vous pouvez utiliser la fonction setTimeout pour y parvenir. Par exemple, l'invite de recherche est automatiquement complétée après l'utilisateur. entrées :

var timer;
function handleChange(){
  clearTimeout(timer)
  timer = setTimeout(function(){
    console.log('自动完成搜索提示')
  },500)
}

2. Code d'interrogation

Dans certains scénarios qui nécessitent des mises à jour en temps réel, vous pouvez utiliser la fonction setInterval pour implémenter l'interrogation. Par exemple, mettez à jour les données du serveur de temps en temps :

var timer = setInterval(function(){
  console.log('从服务器轮询数据')
},5000)

//取消轮询
clearInterval(timer)

3. Code de retour

Dans certains scénarios où des commentaires doivent être fournis aux utilisateurs, la fonction setTimeout peut être utilisée. Par exemple, compte à rebours, effectuer certaines opérations après avoir attendu, etc. :

var count = 10;
var timer = setInterval(function(){
  count--
  console.log('还有' + count + '秒...')
  if(count == 0){
    clearInterval(timer)
    console.log('倒计时结束')
  }
},1000)

Prises ensemble, la fonction setTimeout et la fonction clearTimeout sont très simples, mais elles peuvent jouer un grand rôle dans les applications pratiques, rendant la page Web plus fonctionnelle et l'interface plus convivial.

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!