JavaScript를 사용하여 15분마다 데스크탑 알림 경고(API 및 클론 알림) 작성
11726 단어 JavaScript
하고 싶은 일
개인의 장시간 컴퓨터 작업에서 고개를 돌리거나 돌릴 수 있도록 15분 정도의 간격을 두고 경보를 알렸으면 합니다.
방법의 탐구
알림 API 시작
JavaScript를 사용하더라도 불필요한 라이브러리는 사용하지 않는 것이 좋습니다.
다행히 표준 알림 API가 있어서 이걸로 할게요.
우선 알림을 표시하는 스크립트를 만들어 보세요.
notification.js
window.onload = function() {
Notification.requestPermission();
const notification = new Notification("Check!");
};
alarm15.html
<html>
<head>
<script src="notification.js"></script>
</head>
<body>
</body>
</html>
(이 사이트에서 공개하려면 많은 고민을 해야 하는데 지방이라 별로 신경 안 써요.)
만약 허락한다면 화면 오른쪽 상단에 감각이 좋은 알림이 나타날 것이다.
이거 15분마다 보여주고 싶어요.
설치1 단순성
우선 솔직하게 실시해 보자.
alarm15-simple.js
window.onload = function() {
Notification.requestPermission();
setInterval(checkTime, 1000);
};
let previousMinutes;
const checkTime = function() {
const currentTime = new Date();
const minutes = currentTime.getMinutes();
if (previousMinutes !== minutes && minutes % 15 === 0) {
previousMinutes = minutes;
const notification = new Notification("Check!");
}
};
setInterval(checkTime, 1000)를 통해 1초 간격으로 함수checkTime를 집행한다.함수
checkTime는 현재 시간을 검사합니다. 0/15/30/45분이면 데스크톱에 한 번만 알립니다.알림의 간격을 바꾸려면
minutes % 15 의 수치를 바꿀 수 있습니다.1분 간격으로 테스트)이렇게 하고 싶었던 일이 이루어졌지만...
코드의 경우 이전에 분 단위로 유지된 변수
previousMinutes를 글로벌 범위에 배치합니다.나는 이것을 안전한 범위 안에 가두고 싶다.
설치 2 클론
이렇게 오실로그래프를 껐다.외관 동작이 같다.
alarm15-closure.js
window.onload = function() {
Notification.requestPermission();
setInterval(checkTime, 1000);
};
const checkTime = function() {
let previousMinutes;
return function() {
const currentTime = new Date();
const minutes = currentTime.getMinutes();
if (previousMinutes !== minutes && minutes % 15 === 0) {
previousMinutes = minutes;
const notification = new Notification("Check!");
}
}
}();
즉시 실행된 무명 함수의 결과를 상수
checkTime 에 대입합니다.return function() ...에서 말한 바와 같이 무명 함수를 즉시 집행하고 되돌아오는 결과도 무명 함수이다.이 무명 함수의 코드는 설치된 첫 번째 함수
checkTime의 코드와 완전히 같다.결과적으로 실현된 1과 2는 완전히 같은 함수
checkTime를 실행하는 것처럼 보이지만...첫째와 둘째 실현에서 함수
checkTime의 차이는 함수의 작용 범위에 있다.실현 중 하나가 가장 바깥쪽에 함수를 정의했기 때문에 함수
checkTime의 범위는 전역 범위이다.실현의 2는 외부의 무명 함수에서 함수를 정의했기 때문에 함수
checkTime의 범위는 외부의 무명 함수에서 발생하는 로컬 범위이다.(이렇게 하면 실행할 때가 아니라 정의할 때 정해진 범위를 프록시 용접이라고 한다)
에서 같은 로컬 범위에서 변수를 정의합니다
previousMinutes.같은 범위이기 때문에 함수
checkTime에서 접근할 수 있지만 다른 역할 영역의 함수에서 접근할 수 없습니다.따라서 변수
previousMinutes는 필요한 함수로만 접근하는 안전한 범위에서 제한될 수 있다.추가 설정
알림이 심심하니 옵션을 살짝 설정해 주세요.
alarm15-closure.js
window.onload = function() {
Notification.requestPermission();
setInterval(checkTime, 1000);
};
const checkTime = function() {
let previousMinutes;
const options = {
body: "調子はどうだい？",
icon: "img/youkai_kappa.png"
};
return function() {
const currentTime = new Date();
const minutes = currentTime.getMinutes();
if (previousMinutes !== minutes && minutes % 15 === 0) {
previousMinutes = minutes;
const notification = new Notification("Check!", options);
}
}
}();
(좋아하는 그림)
참고 자료
Notifications API-WebAPI | MDN 사용
WindowOrWorkerGlobalScope.setInterval() - Web API | MDN
눈을 뜨다JavaScript 제7장'거울과 크론'
JavaScript의 원리: 클론의 진실
끝말
이 기사Mikatus Advent Calendar 2019는 7일째로 공개됐다.
내일은 우리 리더@takuya0301!
참고 자료 중의'벽장의 실제 상황'을 꼭 보십시오.
Reference
이 문제에 관하여(JavaScript를 사용하여 15분마다 데스크탑 알림 경고(API 및 클론 알림) 작성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/pons_superus/items/714a8bc16277b3f951cd텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
