Rumah  >  Artikel  >  hujung hadapan web  >  [Ringkasan] 3 jenis tugasan berjadual yang mesti dikuasai oleh bahagian hadapan

[Ringkasan] 3 jenis tugasan berjadual yang mesti dikuasai oleh bahagian hadapan

青灯夜游
青灯夜游asal
2023-02-28 19:31:182090semak imbas

Di bahagian hadapan, masa ialah titik pengetahuan yang sangat penting, dan tugasan berjadual ada di mana-mana. Artikel berikut akan meringkaskan tiga jenis tugasan berjadual yang mesti dikuasai oleh bahagian hadapan. Saya harap ia akan membantu anda!

[Ringkasan] 3 jenis tugasan berjadual yang mesti dikuasai oleh bahagian hadapan

1. Tugasan berjadual di mana-mana

Tugas berjadual, pemahaman mudah adalah apa yang perlu dilakukan selepas berapa lama untuk dilakukan secara berkala. Adakah anda perasan bahawa tugasan berjadual sebenarnya adalah perkara yang biasa dilakukan di mana-mana? rasa tergesa-gesa yang hampir berakhir; ;

Sebagai contoh
Kakitangan produk memberitahu kami bahawa pada jam 12 setiap malam, data jadual A harus disandarkan; ia secara automatik akan melompat ke halaman lain.

Contoh lain, HR menyuruh anda pergi ke bilik persidangan pada pukul 3 petang kerana ada perkara penting untuk dibincangkan sebagai contoh, anda perlu mula bekerja pada pukul 9 setiap hari, dan tidak okey sampai lewat; contohnya, anda akan mula awal pada pukul 9:30 setiap hari Ya, ketua pasukan sentiasa ada walau apa pun, dia akan memandang rendah kepada anda; dibayar pada 15hb setiap bulan, dan bukan sehari lebih awal, sebagai contoh, anda tidak akan bersara sehingga anda berumur 65 tahun, tetapi dia tidak peduli jika anda berumur 35 tahun Berumur 65 tahun, tidak kira sama ada syarikat anda berpendapat bahawa anda seorang pengekod yang lebih tua pada usia 35 tahun. Ini semua adalah pemasa pada masa yang ditetapkan bahawa anda mesti melakukan ini untuk mengawalnya. Anda tidak dapat melihatnya. tetapi ia mengawal anda. 2. Penggunaan setTimeout

1

Senario penggunaan setTimeout menetapkan tempoh masa yang diperlukan untuk melaksanakan sesuatu, dan ia hanya akan dilaksanakan sekali. Hari ini kami hanya melaksanakan senario yang menetapkan bahawa perkara tertentu tidak boleh dimuatkan selepas halaman dimuatkan, untuk mengurangkan kandungan dimuatkan buat kali pertama dan mengurangkan tekanan pemaparan skrin pertama. Kami hanya memuatkan beberapa perkara tambahan 500 milisaat selepas komponen skrin pertama dimuatkan.

Mengambil vue sebagai contoh, sebagai contoh, skrin pertama diletakkan di bawah a.vue Kami tahu bahawa kitaran hayat yang dipasang boleh menunjukkan bahawa DOM komponen telah dimuatkan, tetapi komponen telah dimuatkan dimuatkan, yang tidak mewakili imej dan permintaan. Perenderan telah selesai, jadi kami telah menempah 500 milisaat Kodnya adalah seperti berikut:

[Ringkasan] 3 jenis tugasan berjadual yang mesti dikuasai oleh bahagian hadapan

2 >Banyak kali kami tidak mengesyorkan Gunakan setInterval Sebabnya disebutkan di bawah Walaupun setTimeout dilaksanakan sekali, jika ia dilaksanakan semula selepas pelaksanaan, ia akan menjadi berbilang pelaksanaan.

Sebagai contoh, kami melaksanakan penumpuk yang mula terkumpul dari 0. Kod super hebat adalah seperti berikut. Bukankah kod saya tidak boleh dijalankan kod tidak boleh dijalankan, saya boleh Anda boleh jalankan.

Tetapi jika atas sebab tertentu anda memerlukan kerja ini dan anda tidak boleh lari, maka anda perlu mengubah suai kod untuk menjadikannya kurang hebat dan menjadi kurang hebat

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

3. Penggunaan setInterval

1 Senario penggunaan setInterval

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

Jelas sekali, setInterval penekanan. kali dan dilaksanakan secara berkala. Contohnya, penumpuk bermasa, seperti pemerolehan undian bermasa tanpa pautan soket panjang, seperti carta karusel biasa kami yang bergerak setiap 3 saat. Hari ini kita tidak akan melakukan senario di mana nombor terkumpul sebanyak 1, itu akan menjadi terlalu rendah. ke atas dari 0 lagi.

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

Pernahkah anda melihat ciri blog Brother Gou saya terus menekankan senario projek dan senario projek Saya harap anda tidak mengasingkan mata Pengetahuan harus digunakan dalam pertempuran sebenar seberapa banyak anda belajar dan mengembangkan mata pengetahuan, anda akhirnya akan pergi ke syarikat untuk mendapatkan gaji.

[Ringkasan] 3 jenis tugasan berjadual yang mesti dikuasai oleh bahagian hadapan2. Masalah yang dihadapi dalam projek

disebabkan oleh ciri-ciri pelayar dan setInterval. setInterval sendiri disimpan dalam memori timbunan apabila ia dibuat Barisan gilir sentiasa wujud dalam ingatan, yang juga memastikan ia boleh dilaksanakan tepat pada masanya Digabungkan dengan ciri-ciri penyemak imbas, selepas pelayar menemui timbunan ini memori, ia Pengoptimuman tertentu telah dibuat. Apabila tab penyemak imbas anda tidak berada di bahagian atas skrin, penyemak imbas akan menggantung tugas yang dijadualkan Apabila tab penyemak imbas dipulihkan ke bahagian atas, penyemak imbas akan menyambung semula pelaksanaannya.

所以我们会经常发现一个问题,例如轮播图正在准时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服务端,也别给自己挖坑说自己做过。你不说他们也不会问,这不丢人,放心吧。

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

[Ringkasan] 3 jenis tugasan berjadual yang mesti dikuasai oleh bahagian hadapan

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

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

Hidup adalah seperti pemasa besar, dan di dalam pemasa besar adalah pemasa kecil yang berkait rapat bersama-sama Mereka tidak kelihatan tetapi kelihatan ketara, sehingga keabadian yang anda tidak tahu.

[Pembelajaran yang disyorkan: tutorial video javascript]

Atas ialah kandungan terperinci [Ringkasan] 3 jenis tugasan berjadual yang mesti dikuasai oleh bahagian hadapan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn