Maison interface Web js tutoriel Comment exécuter des tâches planifiées JavaScript dans les astuces background_javascript

Comment exécuter des tâches planifiées JavaScript dans les astuces background_javascript

May 16, 2016 pm 03:24 PM

Même si vous oubliez tout ce que vous savez sur JavaScript, vous n'oublierez jamais : il bloque.

Imaginez qu'il y ait un elfe magique vivant dans votre navigateur, responsable du fonctionnement normal du navigateur. Qu'il s'agisse du rendu HTML, de la réponse aux commandes de menu, du rendu de l'écran, de la gestion des clics de souris ou de l'exécution de fonctions JavaScript, tout est géré par un seul elfe. Il est tellement occupé qu'il ne peut gérer qu'une seule chose à la fois. Si vous lui confiez plusieurs tâches en même temps, il dressera une longue liste de tâches et les terminera dans l'ordre.

Les gens souhaitent souvent que le JavaScript qui initialise les composants et les gestionnaires d'événements soit exécuté le plus rapidement possible. Cependant, certaines tâches en arrière-plan moins importantes n'affectent pas directement l'expérience utilisateur, comme :

Statistiques d'enregistrement

Envoyer des données au réseau social (ou ajouter un bouton « Partager »)

Contenu préchargé

Prétraiter ou pré-afficher le HTML

Ils ne sont pas stricts dans le temps, mais pour que la page reste réactive, ils ne sont exécutés que lorsque l'utilisateur fait défiler la page ou interagit avec le contenu.

Une option est Web Workers, qui peut exécuter du code simultanément dans des threads indépendants. Idéal pour le préchargement et le prétraitement, mais vous n'avez pas d'accès direct ni de mise à jour du DOM. Vous pouvez contourner ce problème dans votre propre code, mais rien ne garantit que les scripts tiers comme Google Analytics n'en auront jamais besoin.

Une autre option est setTimeout, telle que setTimeout(doSomething, 1);. Une fois les autres tâches immédiates exécutées, le navigateur exécutera la fonction doSomething(). En fait, cela a été relégué au bas de la liste des choses à faire. Malheureusement, la fonction sera appelée quels que soient les besoins de traitement.

#requestIdleCallback

requestIdleCallback est une nouvelle API, utilisée pour effectuer des tâches planifiées en arrière-plan moins importantes lorsque le navigateur prend une pause. Cela rappelle forcément requestAnimationFrame, qui exécute la fonction de mise à jour de l'animation avant le prochain redessin. Si vous souhaitez en savoir plus, cliquez ici : Utilisez requestAnimationFrame pour réaliser des animations simples.

Surveillance de la fonctionnalité requestIdleCallback :

if ('requestIdleCallback' in window) {
 // requestIdleCallback supported
 requestIdleCallback(backgroundTask);
}
else {
 // no support - do something else
 setTimeout(backgroundTask1, 1);
 setTimeout(backgroundTask2, 1);
 setTimeout(backgroundTask3, 1);
}
Copier après la connexion

Vous pouvez également spécifier des objets de paramètres de configuration, tels que le délai d'attente,

requestIdleCallback(backgroundTask, { timeout: 3000; }); 
Copier après la connexion

Assurez-vous que la fonction est appelée dans les 3 secondes, que le navigateur soit inactif ou non.

Lorsque l'objet date limite passe les paramètres suivants, requestIdleCallback n'exécute le rappel qu'une seule fois :

didTimeout - Défini sur true si le délai d'attente facultatif se déclenche
timeRemaining()—— La fonction renvoie le nombre de millisecondes restant pour exécuter la tâche
timeRemaining() alloue jusqu'à 50 ms pour l'exécution de la tâche. Si cette limite est dépassée, la tâche ne sera pas arrêtée. Cependant, il est préférable de rappeler requestIdleCallback pour organiser la suite du traitement.

Créons un exemple simple pour exécuter plusieurs tâches en séquence. La référence de fonction de la tâche est stockée dans le tableau :

//待执行的函数数组
var task = [
  background1,
  background2,
  background3
];
if ('requestIdleCallback' in window) {
 //支持 requestIdleCallback
 requestIdleCallback(backgroundTask);
}
else {
 //不支持 —— 立刻执行所有任务
 while (task.length) {
  setTimeout(task.shift(), 1);
 }
}
//requestIdleCallback 回调函数
function backgroundTask(deadline) {
 //如果存在,执行下一个任务
 while (deadline.timeRemaining() > 0 && task.length > 0) {
  task.shift()();
 }
 //需要的话,安排进一步任务
 if (task.length > 0) {
  requestIdleCallback(backgroundTask);
 }
}
Copier après la connexion

#Que ne faut-il pas faire entre requestIdleCallback ?

Paul Lewis a mentionné dans son article que les tâches effectuées par une requestIdleCallback doivent être découpées en petits morceaux. Il ne convient pas aux situations temporelles imprévisibles (telles que l'exploitation du DOM, il est préférable d'utiliser le rappel requestAnimationFrame). Soyez également prudent lorsque vous résolvez (ou rejetez) des promesses, la fonction de rappel sera exécutée immédiatement après la fin du rappel inactif, même s'il ne reste plus de temps.

#requestIdleCallback Prise en charge du navigateur

requestIdleCallback est une fonctionnalité expérimentale, la spécification est encore instable et il n'est pas surprenant de rencontrer des changements d'API. Chrome 47 est pris en charge... devrait être disponible avant fin 2015. Opera devrait emboîter le pas. Microsoft et Mozilla réfléchissent à la question de savoir si les API doivent prendre en charge les promesses. Apple, comme à son habitude, se montre pessimiste.

Paul Lewis (mentionné ci-dessus) a écrit un simple shim requestIdleCallback, qui peut simuler le comportement de surveillance inactive du navigateur, mais n'est pas un polyfill (la différence entre shim et polyfill).

Le code de cale requestIdleCallback est le suivant :

/*!
 * Copyright Google Inc. All rights reserved.
 *
 * Licensed under the Apache License, Version . (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
 * or implied. See the License for the specific language governing
 * permissions and limitations under the License.
 */
/*
 * @see https://developers.google.com/web/updates///using-requestidlecallback
 */
window.requestIdleCallback = window.requestIdleCallback ||
 function (cb) {
  var start = Date.now();
  return setTimeout(function () {
   cb({
    didTimeout: false,
    timeRemaining: function () {
     return Math.max(, - (Date.now() - start));
    }
   });
  }, );
 }
window.cancelIdleCallback = window.cancelIdleCallback ||
 function (id) {
  clearTimeout(id);
 }
Copier après la connexion

ps : Comment exécuter une tâche planifiée

1. Exécutez GPEDIT.MSC

2. Sélectionnez la configuration de l'ordinateur

--- Paramètres Windows
                                                          Paramètres de sécurité
​​​​—Stratégie locale
​​​​​—-Attribution des droits d'utilisateur
Double-cliquez sur Accéder à cet ordinateur depuis le réseau à droite
Ajoutez les noms d'utilisateur requis à la liste.

3. --- Paramètres de sécurité

---Choix sûr
Activez Autoriser les opérateurs de serveur à planifier des tâches

4.-----Stratégie locale

--- Connectez-vous en tant que tâche par lots
Ajoutez les noms d'utilisateur requis à la liste.

5.-----Stratégie locale

--- Autoriser la confiance des ordinateurs et des utilisateurs pour la délégation
Ajoutez les noms d'utilisateur requis à la liste.
Il est préférable d'être l'utilisateur administrateur.

Si le plan de tâches ne peut pas être démarré, code d'invite : 0X80041315

Solution : Il existe deux possibilités. La première est que le service "Task Scheduler" dans le système n'est pas démarré. Vous pouvez taper "services.msc" pendant le fonctionnement pour vérifier si le service "Task Scheduler" est défini sur "Déjà". "Désactiver", si c'est le cas, double-cliquez simplement dessus pour changer le type de démarrage en "Automatique" et réinitialisez une tâche planifiée pour l'exécuter.

Si votre compte actuel est configuré pour se connecter automatiquement et que son mot de passe de connexion est vide, cela peut également empêcher l'exécution du plan de tâches à temps. Dans XP Professional Edition, vous devez exécuter "gpedit.msc" pour. modifiez la stratégie de groupe : développez Configuration "Ordinateur" → Paramètres Windows → Paramètres de sécurité → Stratégie de l'ordinateur local → Options de sécurité ; double-cliquez sur l'élément " Comptes : les comptes locaux avec des mots de passe vides autorisent uniquement la connexion à la console " à droite, puis sélectionnez " Désactivé" dans la boîte de dialogue contextuelle.

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Que dois-je faire si je rencontre l'impression de code brouillé pour les reçus en papier thermique frontal? Que dois-je faire si je rencontre l'impression de code brouillé pour les reçus en papier thermique frontal? Apr 04, 2025 pm 02:42 PM

Des questions et des solutions fréquemment posées pour l'impression de billets thermiques frontaux pour le développement frontal, l'impression de billets est une exigence commune. Cependant, de nombreux développeurs mettent en œuvre ...

Qui est payé plus de python ou de javascript? Qui est payé plus de python ou de javascript? Apr 04, 2025 am 12:09 AM

Il n'y a pas de salaire absolu pour les développeurs Python et JavaScript, selon les compétences et les besoins de l'industrie. 1. Python peut être davantage payé en science des données et en apprentissage automatique. 2. JavaScript a une grande demande dans le développement frontal et complet, et son salaire est également considérable. 3. Les facteurs d'influence comprennent l'expérience, la localisation géographique, la taille de l'entreprise et les compétences spécifiques.

Démystifier javascript: ce qu'il fait et pourquoi c'est important Démystifier javascript: ce qu'il fait et pourquoi c'est important Apr 09, 2025 am 12:07 AM

JavaScript est la pierre angulaire du développement Web moderne, et ses principales fonctions incluent la programmation axée sur les événements, la génération de contenu dynamique et la programmation asynchrone. 1) La programmation axée sur les événements permet aux pages Web de changer dynamiquement en fonction des opérations utilisateur. 2) La génération de contenu dynamique permet d'ajuster le contenu de la page en fonction des conditions. 3) La programmation asynchrone garantit que l'interface utilisateur n'est pas bloquée. JavaScript est largement utilisé dans l'interaction Web, les applications à une page et le développement côté serveur, améliorant considérablement la flexibilité de l'expérience utilisateur et du développement multiplateforme.

Comment fusionner les éléments du tableau avec le même ID dans un seul objet en utilisant JavaScript? Comment fusionner les éléments du tableau avec le même ID dans un seul objet en utilisant JavaScript? Apr 04, 2025 pm 05:09 PM

Comment fusionner les éléments du tableau avec le même ID dans un seul objet en JavaScript? Lors du traitement des données, nous rencontrons souvent la nécessité d'avoir le même ID ...

Comment réaliser des effets de défilement de parallaxe et d'animation des éléments, comme le site officiel de Shiseido?
ou:
Comment pouvons-nous réaliser l'effet d'animation accompagné d'un défilement de page comme le site officiel de Shiseido? Comment réaliser des effets de défilement de parallaxe et d'animation des éléments, comme le site officiel de Shiseido? ou: Comment pouvons-nous réaliser l'effet d'animation accompagné d'un défilement de page comme le site officiel de Shiseido? Apr 04, 2025 pm 05:36 PM

La discussion sur la réalisation des effets de défilement de parallaxe et d'animation des éléments dans cet article explorera comment réaliser le site officiel de Shiseido (https://www.shiseido.co.jp/sb/wonderland/) ...

La différence dans Console.Log de sortie Résultat: Pourquoi les deux appels sont-ils différents? La différence dans Console.Log de sortie Résultat: Pourquoi les deux appels sont-ils différents? Apr 04, 2025 pm 05:12 PM

Discussion approfondie des causes profondes de la différence de sortie Console.log. Cet article analysera les différences dans les résultats de sortie de la fonction Console.log dans un morceau de code et expliquera les raisons derrière. � ...

JavaScript est-il difficile à apprendre? JavaScript est-il difficile à apprendre? Apr 03, 2025 am 12:20 AM

Apprendre JavaScript n'est pas difficile, mais c'est difficile. 1) Comprendre les concepts de base tels que les variables, les types de données, les fonctions, etc. 2) Master la programmation asynchrone et les implémenter via des boucles d'événements. 3) Utilisez les opérations DOM et promettez de gérer les demandes asynchrones. 4) Évitez les erreurs courantes et utilisez des techniques de débogage. 5) Optimiser les performances et suivre les meilleures pratiques.

Comment implémenter la fonction de glisser-déposer et de régler la fonction de réglage similaire à VScode dans le développement frontal? Comment implémenter la fonction de glisser-déposer et de régler la fonction de réglage similaire à VScode dans le développement frontal? Apr 04, 2025 pm 02:06 PM

Explorez la mise en œuvre de la fonction de glisser et de réglage du panneau de type VScode dans le frontal. Dans le développement frontal, comment implémenter un VScode comme ...

See all articles