[Zusammenfassung] 3 Arten geplanter Aufgaben, die das Front-End beherrschen muss

Im Front-End ist das Timing ein sehr wichtiger Wissenspunkt und geplante Aufgaben sind überall. Der folgende Artikel fasst die drei Arten geplanter Aufgaben zusammen, die das Front-End meistern muss. Ich hoffe, er ist hilfreich für Sie!

1. Allgegenwärtige geplante Aufgaben

Geplante Aufgaben, ein einfaches Verständnis ist, was nach welcher Zeit und wie oft zu tun ist. Haben Sie das Gefühl, dass geplante Aufgaben tatsächlich eine allgegenwärtige Sache sind,

Zum Beispiel wird der Flash-Sale-Countdown auf der E-Commerce-Plattform jede Sekunde ausgeführt, was Ihnen das Gefühl gibt, dass er bald zu Ende geht ; Wir kaufen Tickets ab 12306 und der Countdown auf der Zahlungsseite sagt Ihnen jede Sekunde, dass das Ticket nicht mehr Ihnen gehört, wenn Ihre Bestellung nicht bezahlt wird. Zum BeispielDas Produktpersonal hat uns das um 12 Uhr mitgeteilt. Jede Nacht muss Tabelle A gesichert werden. Zum Beispiel wird eine Minute nach dem Hinzufügen der Seite automatisch zu einer anderen Seite gesprungen. Ein anderes Beispiel ist, wenn die Personalabteilung Ihnen sagt, dass Sie um 15 Uhr in den Konferenzraum gehen sollen, weil es wichtige Dinge zu besprechen gibt, weil Sie beispielsweise jeden Tag um 21 Uhr mit der Arbeit beginnen müssen, und es wird nicht funktionieren, wenn Sie zu spät kommen Beispielsweise gibt es jeden Morgen um 9:30 Uhr ein Treffen mit dem Teamleiter. Es regnet oder scheint immer, und wenn Sie nicht gehen, wird er Sie beispielsweise nicht mögen. Ihr Gehalt wird am 15. ausgezahlt eines jeden Monats, und er wird zum Beispiel nicht einen Tag früher in Rente gehen, und es ist ihm egal, ob Sie zwischen 35 und 65 Jahre alt sind Es spielt keine Rolle, ob Ihr Unternehmen Sie mit 35 Jahren für einen älteren Programmierer hält.

Das sind alles Timer. Sie werden Ihnen zu einem festen Zeitpunkt mitteilen, dass Sie dies tun müssen. Es gibt einen Code im Leben, der Sie nicht sehen kann, aber er kontrolliert Sie.

2. Die Verwendung von setTimeout

1. Das Verwendungsszenario von setTimeout

Das Verwendungsszenario von setTimeout legt fest, wie lange es dauert, etwas auszuführen, und es wird nur einmal ausgeführt. Heute implementieren wir einfach ein Szenario, das festlegt, dass bestimmte Dinge nach dem Laden der Seite nicht geladen werden sollen, um den Inhalt zu reduzieren, der zum ersten Mal geladen wird, und den Druck beim Rendern auf dem ersten Bildschirm zu verringern. Einige zusätzliche Dinge laden wir erst 500 Millisekunden nach dem Laden der ersten Bildschirmkomponente.

Am Beispiel von Vue wird der erste Bildschirm unter a.vue platziert. Wir wissen, dass der bereitgestellte Lebenszyklus darauf hinweisen kann, dass das Komponenten-DOM geladen wurde, aber das Laden der Komponente ist abgeschlossen, was nicht bedeutet dass das Bild und die Anfrage gerendert wurden, und der Code lautet wie folgt:

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

2. Aus diesem Grund empfehlen wir nicht, setInterval zu verwenden Wie unten erwähnt, wird setTimeout zwar einmal ausgeführt, wird aber nach der Ausführung erneut ausgeführt. Wird es nicht einmal mehrfach ausgeführt?

Wenn wir beispielsweise einen Akkumulator implementieren und mit der Akkumulation bei 0 beginnen, sieht der supertolle Code nicht so aus, dass er nicht ausgeführt werden kann , ich kann es ausführen.

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

Aber wenn Sie diesen Job aus irgendeinem Grund brauchen und nicht weglaufen können, dann müssen Sie den Code ändern, um ihn weniger großartig und ein bisschen cool zu machen

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

3 Die Verwendung von setInterval

1. Verwendungsszenarien von setInterval

Offensichtlich legt setInterval Wert auf die mehrfache Ausführung und in regelmäßigen Abständen. Zum Beispiel zeitgesteuerte Akkumulatoren, etwa die zeitgesteuerte Abfrageerfassung ohne lange Socket-Links, etwa unser gemeinsames Karusselldiagramm, das sich alle 3 Sekunden bewegt. Heute werden wir keine Szene erstellen, in der sich die Zahlen um 1 addieren, das wäre zu niedrig. Wir erstellen eine Szene, in der die Zahlen um 13 addiert werden, und wenn der Wert größer oder gleich 100 erreicht, beginnen wir mit dem Aufwärtszählen bei 0 wieder.

Ist Ihnen eine Funktion in Brother Gous Blog aufgefallen? Ich hoffe, Sie isolieren Wissenspunkte nicht im tatsächlichen Kampf Am Ende muss man zur Firma gehen, um Lohn zu verdienen.

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

2. Die im Projekt aufgetretenen Probleme

sind auf die Eigenschaften des Browsers und von setInterval zurückzuführen. setInterval selbst wird beim Erstellen im Heap-Speicher gespeichert, was auch sicherstellt, dass es beim nächsten Mal pünktlich ausgeführt werden kann, nachdem der Browser diesen Heap gefunden hat Speicher, es wurden bestimmte Optimierungen vorgenommen. Wenn sich Ihr Browser-Tab nicht oben auf dem Bildschirm befindet, unterbricht der Browser die geplante Aufgabe. Wenn der Browser-Tab wieder oben angezeigt wird, setzt der Browser seine Ausführung fort.

所以我们会经常发现一个问题，例如轮播图正在准时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点前不到不行。老板告诉你这个东西下班就得做出来，你不做出来也行啊，但你知道你必须做出来。

Das Leben ist wie ein großer Timer, und im Inneren des großen Timers sind kleine Timer eng miteinander verbunden. Sie sind unsichtbar, scheinen aber greifbar zu sein, bis in die Ewigkeit, die du nicht kennst.

【Empfohlenes Lernen: Javascript-Video-Tutorial】

Das obige ist der detaillierte Inhalt von[Zusammenfassung] 3 Arten geplanter Aufgaben, die das Front-End beherrschen muss. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!