Comment utiliser l'actualisation programmée jquery

jQuery est une bibliothèque JavaScript couramment utilisée qui peut aider les développeurs à utiliser plus facilement des documents HTML, à gérer des événements, à créer des animations, à implémenter des requêtes asynchrones, etc., tandis que l'actualisation programmée est une fonction qui permet aux pages Web de s'actualiser automatiquement à certaines occasions. . Cet article explique comment utiliser l'actualisation programmée dans jQuery.

1. Utilisez la fonction setInterval

setInterval est une fonction de minuterie courante en JavaScript. Elle peut exécuter à plusieurs reprises un bloc de code spécifié à intervalles. L'intervalle de temps sélectionné est défini par le deuxième paramètre de la fonction. Lorsque vous utilisez jQuery pour une actualisation programmée, nous pouvons utiliser la fonction setInterval pour atteindre cet objectif.

Voici un exemple simple qui récupère les données du serveur toutes les 1 seconde :

setInterval(function(){
   $.get("data.php", function(result){
      // 在此处处理返回结果
   });
}, 1000);

Ce code définit une fonction qui s'exécute toutes les 1 seconde, en utilisant $.get de jQuery. La fonction obtient le résultat de retour de data.php et transmet le résultat à la fonction de rappel. Au sein de la fonction de rappel, nous pouvons traiter les résultats, comme mettre à jour des éléments HTML ou créer des animations, etc.

2. Utilisez la fonction setTimeout

La fonction setTimeout est très similaire à la fonction setInterval, mais elle n'exécutera le bloc de code spécifié qu'une seule fois après l'heure spécifiée. Si nous devons simuler l'effet d'une actualisation planifiée, nous pouvons utiliser la fonction setTimeout pour implémenter une minuterie qui s'exécute en boucle.

Voici un exemple simple :

function refreshData(){
   $.get("data.php", function(result){
      // 在此处处理返回结果
      setTimeout(refreshData, 1000); // 每隔1秒钟再次刷新
   });
}

$(document).ready(function(){
   refreshData(); // 初始运行
});

Ce code définit une fonction nomméefreshData, qui s'exécutera à plusieurs reprises après avoir obtenu les données. Lorsque notre page est chargée, nous appelons la fonction rafraîchirData, qui commencera à s'exécuter et actualisera automatiquement les données toutes les 1 seconde.

3. Utilisez la fonction de chargement de jQuery

La fonction de chargement de jQuery peut nous aider à mettre à jour les éléments HTML de manière asynchrone, comme un élément div intégré. Contrairement aux fonctions get et post, la fonction de chargement peut charger directement l'URL spécifiée. Si l'URL spécifiée n'a aucun paramètre, cela équivaut à recharger l'URL à chaque fois.

Voici un exemple :

$(document).ready(function(){
   setInterval(function(){
      $("#myDiv").load("data.php"); // 每隔5秒钟重载数据
   }, 5000);
});

Ce code utilise la fonction de chargement de jQuery, qui récupère les données du serveur et insère les données HTML renvoyées dans l'élément myDiv. Dans cet exemple, nous utilisons la fonction setInterval pour actualiser automatiquement les données toutes les 5 secondes.

4. Résumé

Lors de l'utilisation de jQuery pour une actualisation programmée, nous pouvons choisir d'utiliser la fonction setInterval, la fonction setTimeout ou la fonction de chargement de jQuery. L'actualisation programmée peut nous aider à obtenir l'effet de mise à jour automatique des données ou de mise à jour dynamique des pages, mais elle doit être utilisée avec prudence car elle occupera les ressources du serveur et ralentira la vitesse de chargement du site Web. Si vous devez utiliser l'actualisation programmée, veuillez l'optimiser pour éviter une charge inutile pour les utilisateurs.

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!