[Résumé] 3 types de tâches planifiées que le front-end doit maîtriser

Dans le front-end, le timing est un point de connaissance très important, et les tâches planifiées sont partout. L’article suivant résumera les trois types de tâches planifiées que le front-end doit maîtriser. J’espère qu’il vous sera utile !

1. Tâches planifiées omniprésentes

Tâches planifiées, une simple compréhension est quoi faire après combien de temps et à quelle fréquence le faire. Avez-vous senti que les tâches planifiées sont en fait une chose omniprésente,

Par exemple, le compte à rebours de la vente flash sur la plateforme de commerce électronique est exécuté toutes les secondes, vous donnant un sentiment d'urgence qu'elle est sur le point de se terminer Par exemple ; Nous achetons des billets à partir du 12306, et le compte à rebours sur la page de paiement vous indiquera à chaque seconde que si votre commande n'est pas payée, le billet ne vous appartiendra plus Par exempleLe personnel du produit nous l'a dit à 12h ; horloge tous les soirs, la table A doit être sauvegardée. Par exemple, 1 minute après l'ajout de la page, elle passera automatiquement à une autre page. Un autre exemple est si les RH vous disent d'aller à la salle de conférence à 15h parce qu'il y a des choses importantes à discuter, par exemple, vous devez commencer à travailler à 21h tous les jours, et cela ne fonctionnera pas si vous êtes en retard ; par exemple, il y aura une réunion matinale à 9h30 tous les jours avec le chef d'équipe. Il fait toujours beau, mauvais temps, et si vous n'y allez pas, il ne vous aimera pas, par exemple, votre salaire sera payé le 15 ; de chaque mois, et ne sera pas payé un jour plus tôt ; par exemple, vous ne prendrez votre retraite qu'à 65 ans, et il s'en fiche si vous avez entre 35 et 65 ans. peu importe si votre entreprise pense que vous êtes un codeur plus âgé de 35 ans.

Ce sont tous des minuteurs. Ils vous diront à une heure fixe que vous devez le faire. Il y a un code dans le programme pour le contrôler. Il y a une main invisible dans la vie, vous ne pouvez pas la voir, mais elle vous contrôle.

En prenant vue comme exemple, le premier écran est placé sous a.vue On sait que le cycle de vie monté peut indiquer que le composant DOM a été chargé, mais le chargement du composant est terminé, ce qui ne veut pas dire. que les images et les requêtes ont été rendues. Nous avons donc réservé 500 millisecondes, et le code est le suivant :

。。。 // 表示a.vue其余代码
mounted() {
    let timeout1 = setTimeout(() => {
        // 需要延迟做的事情
        // 并且延迟完毕要清除setTimeout
        timeout1 = null;
        window.clearTimeout(timeout1);
    }, 500)
},

Par exemple, nous implémentons un accumulateur qui commence à accumuler à partir de 0. Le super code n'est-il pas génial ? Ce n'est pas que mon code ne peut pas s'exécuter, je. peut l'exécuter.

var num = 0;
setTimeout(() => {
    num += 1;
    setTimeout(() => {
        num += 1;
        setTimeout(() => {
            num += 1;
            ......
            setTimeout(() => {
                num += 1;
            }, 970)
        }, 970)
    }, 970)
}, 970)

Mais si vous avez besoin de ce travail pour une raison quelconque et que vous ne pouvez pas vous enfuir, alors vous devez modifier le code pour le rendre moins génial et devenir un peu plus épicé

var num = 0;
function timeoutFn() {
   setTimeout(() => {
      num += 1;
      timeoutFn();
   }, 970)
   console.log('经海路大白狗看一下num吧', num);
}
timeoutFn();

.

Évidemment, setInterval met l'accent sur l'exécution plusieurs fois et à intervalles réguliers. Par exemple, des accumulateurs chronométrés, tels que l'acquisition d'interrogations chronométrées sans longues liaisons de socket, comme notre graphique carrousel commun qui se déplace toutes les 3 secondes. Aujourd'hui, nous n'allons pas faire un scénario où les nombres s'accumulent par 1, ce serait trop faible. Nous ferons un scénario où les nombres s'accumulent par 13, et lorsque la valeur sera supérieure ou égale à 100, nous commencerons à accumuler. à nouveau à partir de 0.

var num = 0;
setInterval(() => {
   if (num >= 100) {
        num = 0;
   }
  num += 13;
}, 970)

sont dus aux caractéristiques du navigateur et de setInterval. setInterval lui-même est stocké dans la mémoire du tas lors de sa création. La file d'attente existe toujours dans la mémoire, ce qui garantit également qu'elle peut être exécutée à temps la prochaine fois, en combinaison avec les caractéristiques du navigateur, une fois que le navigateur a trouvé ce tas. mémoire, certaines optimisations ont été apportées. Lorsque l'onglet de votre navigateur n'est pas en haut de l'écran, le navigateur suspend la tâche planifiée. Lorsque l'onglet du navigateur est restauré en haut, le navigateur reprend son exécution.

所以我们会经常发现一个问题，例如轮播图正在准时3秒动一次，然后浏览器被切走了，等你隔一段时间回来后呢，轮播图就像疯了一样的转动，然后再继续恢复为3秒一动；又或者是在IOS还是什么环境下来着，我记得当时是做一个倒计时的功能。当浏览器切走之前还剩12分钟，等浏览器切走之后呢，倒计时就不动了，等过了2分钟再切回来的时候，发现还是12分钟，又开始倒计时。

其实这个时候可以检测当前浏览器是否处于用户眼前（或者说是否被切走了），用这个代码来判断：

var countSecondFn = null;
function goOnCount() {
    countSecondFn = setInterval(() => {
        // 任务执行
    })
}
document.addEventListener('visibilitychange',function(){
   if(document.visibilityState=='hidden'){
      window.clearInterval(countSecondFn);
      countSecondFn = null;
    }else if(document.visibilityState=='visible'){
      goOnCount(); 
    }
});

所以很多时候，我们更希望用setTimeout的递归来替换掉setInterval的执行，减少更多的问题。 

四、node-schedule的使用

1. node-schedule的使用场景

node-schedule目前主要用于node服务端，例如我们的一些页面，数据是配置出来的，那么就没有必要每次都去请求数据库，再返回给前端，可以定时一下，几分钟发送一次请求即可；再比如我们每次升级上线，为了保证一个良好的性能，HTML可能会部署在服务端，而静态资源则部署在另外的服务器。这样静态资源从v1.0升级到v1.1，则可以定时的去获取配置平台的版本号，然后动态拼接到HTML页面上，以保证可以每次升级拿到最新的静态资源。

但node-schedule和setInterval有本质上的区别。node-schedule更强调哪一天哪个小时，哪一分钟，哪一秒钟准确的去执行。就像我们经常被告知你明天早上9点去做一件什么事情，每天晚上9点你才可以下班。这样的场景，恐怕setInterval不能够胜任了。

2.  简单使用node-schedule

例如每到10分（3点10分、8点10分。。。12点10分）的时候，我们去请求一下数据，第一次请求到的数据进行缓存处理，再次请求到的数据与老数据进行对比，如果无更新则继续用缓存数据，如果有更新则利用新数据。

const schedule = require('node-schedule');
let job = schedule.scheduleJob('* 10 * * * *', () => {
 axios(url, data, (res) => {
    // 与缓存数据对比
    // 后者再犯个懒，不对比，每次都用新数据，请求异常了再用缓存数据
 })
});

3. 执行钥匙Corn

上一段代码中的   * 10 * * * *   呢，就是所谓node-schedule的定时钥匙，这6个星号从左到右表示：秒 分 小时 天 月 年 ，这样看是不是就更明白他的准确性和与setInterval的区别了。 

4. Corn在项目中的问题 

竟然这个Corn定时钥匙如此准确，规定了哪一分钟那一秒钟去执行，去取数据，比如你写的是每分钟的第10秒去获取，这本没有问题。比如全公司都公用一个配置平台呢，你每分钟的第10秒去获取，那比如你这个项目用到了N台机器呢，这N台是否要都是每分钟的第10秒去获取？那如果全公司的N个业务系统都这么写呢，会有什么问题呢？哈哈，如果听明白了狗哥的意思，欢迎和狗哥交流。

5. 自学前端有没有必要学习node

其实我觉得对于自学前端，急于找到前端开发工作的人，没有太大必要去学习node服务端知识。你基本把纯前端的知识学到位已经很不容易了。但如果有时间，还是建议简单学习一下，哪怕只是搭个koa的架子，练习着写一下接口数据格式。一旦自己练习写过接口数据，自己再从前端发送ajax调用一下，我相信你将会有一个更全面的对开发项目的认知，在你遇到问题的时候，有更多的解决思路。

但如果你没有学透，千万别在简历上写你精通node服务端，也别给自己挖坑说自己做过。你不说他们也不会问，这不丢人，放心吧。

五、定时器代码之外的思考

 狗哥觉得其实即便你做了开发，也不应该生活中只有开发，我们努力工作是为了生活，为了更好的生活，所以狗哥更偏向于基于故事讲基础知识点，也更喜欢着力于知识点冒出个小故事（这句话换成抓手咋说？）。

慢慢的，习惯了开发中的定时任务，我们清楚的知道几秒后该让网页执行一件什么事，每天几点该执行一件什么事，可能觉得已经能够胜任工作了，但久而久之，你到了一定的时刻就必须得离开学校，赖在那里也没有用，到了一定的时机，你就需要结婚生子去面对。没人有强拉着你9点前必须到公司，但你知道9点前不到不行。老板告诉你这个东西下班就得做出来，你不做出来也行啊，但你知道你必须做出来。

La vie est comme une grande minuterie, et à l’intérieur de la grande minuterie se trouvent de petites minuteries étroitement liées les unes aux autres. Elles sont invisibles mais semblent tangibles, jusqu’à l’éternité que vous ne connaissez pas.

【Apprentissage recommandé : Tutoriel vidéo javascript】

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!