[요약] 프론트엔드가 마스터해야 하는 예약된 작업 3가지

프론트엔드에서는 타이밍이 매우 중요한 지식 포인트이며, 예정된 작업은 어디에나 있습니다. 다음 글은 프론트엔드가 마스터해야 하는 세 가지 유형의 예약된 작업을 요약한 것입니다. 도움이 되기를 바랍니다.

1. 유비쿼터스 예약 작업

예약 작업, 간단한 이해는 무엇을 해야 하는지, 얼마나 자주 무엇을 해야 하는지입니다. 예약된 작업이 실제로 어디에나 있는 일이라고 생각하셨나요?

예를 들어 전자상거래 플랫폼의 플래시 세일 카운트다운은 매초 실행되어 곧 끝날 것 같은 긴박감을 줍니다. 예를 들어; 12306에서 티켓을 구매하면 결제 페이지의 카운트다운에서 주문이 결제되지 않으면 티켓이 더 이상 속하지 않는다는 메시지가 매초 표시됩니다. 밤에는 테이블 A를 백업해야 합니다. 예를 들어 페이지가 추가된 후 1분이 지나면 자동으로 다른 페이지로 이동합니다. 또 다른 예는 HR이 중요한 이야기가 있어서 오후 3시에 회의실로 가라고 지시하는 경우입니다. 예를 들어 매일 오후 9시에 일을 시작해야 하는데 늦으면 일이 안 됩니다. 예를 들어, 매일 9시 30분에 팀 리더와 함께 아침 회의가 있습니다. 비가 오나 눈이 오나 항상 당신이 가지 않으면 그는 당신을 좋아하지 않을 것입니다. 예를 들어 당신의 월급은 그날 지불될 것입니다. 매월 15일, 하루 먼저 급여를 받지 않습니다. 예를 들어, 65세가 될 때까지 퇴직하지 않으며, 귀하가 35세에서 65세 사이인지 상관하지 않습니다. 귀하의 회사가 귀하를 35세의 나이 많은 코더로 생각하는지 여부는 중요하지 않습니다. 이것들은 모두 정해진 시간에 이를 수행해야 한다고 알려줍니다. 프로그램에는 이를 제어할 수 있는 코드가 있습니다. 보이지 않는 손이 여러분을 제어합니다.

2. setTimeout의 사용법

1. setTimeout의 사용 시나리오

setTimeout의 사용 시나리오는 무언가를 실행하는 데 걸리는 시간을 규정하며 한 번만 실행됩니다. 오늘 우리는 처음으로 로드되는 콘텐츠를 줄이고 첫 화면 렌더링의 부담을 줄이기 위해 페이지가 로드된 후에 특정 항목을 로드해서는 안 된다고 규정하는 시나리오를 구현합니다. 첫 번째 화면 구성 요소가 500밀리초 동안 로드되면 몇 가지 추가 항목을 로드합니다.

예를 들어 vue를 사용하면 첫 번째 화면이 a.vue 아래에 배치됩니다. 마운트된 라이프 사이클은 컴포넌트 DOM이 로드되었음을 나타낼 수 있지만 컴포넌트 로딩이 완료되었음을 의미하지는 않습니다. 이미지와 요청이 렌더링되었으므로 500밀리초를 예약했으며 코드는 다음과 같습니다.

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

2. setInterval 대체

이러한 이유로 setInterval을 사용하지 않는 것이 좋습니다. 아래에서 설명하는 것처럼 setTimeout은 한 번만 실행해도 한 번 실행한 후에는 내부적으로 실행되는 것이 아닌가요?

예를 들어 누산기를 구현하고 0부터 누적을 시작하면 다음과 같은 훌륭한 코드가 나오지 않나요? 코드가 실행되지 않는 경우도 있습니다. , 실행할 수 있습니다.

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

하지만 어떤 이유로 이 작업이 필요하고 도망칠 수 없다면 코드를 수정하여 덜 멋지고 조금 멋있게 만들어야 합니다

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

3. setInterval의 사용

1. setInterval의 사용 시나리오

분명히 setInterval은 정기적인 간격으로 여러 번 실행하는 것을 강조합니다. 예를 들어, 3초마다 이동하는 공통 캐러셀 차트와 같이 긴 소켓 링크 없이 시간이 지정된 폴링 획득과 같은 시간이 지정된 누산기입니다. 오늘은 숫자가 1씩 쌓이는 장면을 만들지 않을 것입니다. 숫자가 13씩 쌓이는 장면을 만들고 그 값이 100 이상이면 0부터 위쪽으로 계산을 시작하겠습니다. 다시.

고우 형제 블로그의 특징을 발견하셨나요? 프로젝트 시나리오를 계속 강조하고 있으니, 지식 포인트는 실제 전투에서 활용해야 합니다. 결국 회사에 가서 월급을 벌어야 한다.

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

2. 프로젝트

에서 발생하는 문제는 브라우저 및 setInterval의 특성 때문입니다. setInterval 자체는 생성 시 힙 메모리에 저장되며, 이는 브라우저가 이 힙을 찾은 후 브라우저의 특성과 결합되어 다음에 실행될 수 있도록 보장합니다. 메모리, 특정 최적화가 이루어졌습니다. 브라우저 탭이 화면 상단에 없으면 브라우저는 예약된 작업을 일시 중지하고 브라우저 탭이 상단으로 복원되면 브라우저 실행을 다시 시작합니다.

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

인생은 큰 타이머와 같으며, 그 큰 타이머 안에는 작은 타이머들이 밀접하게 연결되어 있습니다. 그것들은 보이지 않지만 만질 수 있는 것처럼 보입니다. 영원까지는 알 수 없습니다.

【추천 학습: javascript 비디오 튜토리얼】

위 내용은 [요약] 프론트엔드가 마스터해야 하는 예약된 작업 3가지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!