JavaScript 日期與計時器

JavaScript 中日期和計時器是常用的工具方法，本文主要介紹建構式 Date 的使用和時間戳的概念，以及設定計時器和清除計時器的方法

日期物件

Date 是一個建構式，其原型上定義了一些日期方法
Date()

執行 Date()，回傳表示日期的字串

new Date()

沒有引數，回傳當前日期實體物件

var date = new Date();
console.log(Object.prototype.toString.call(date)); // [Object Date]
date.getFullYear() // 回傳年份，如 2020
dae.getMonth() // 回傳月份減一，加一得到月份
date.getDate() // 回傳幾號，1 到 31
date.getDay() // 回傳周幾，0 到 7，周日開始
date.getHours() // 回傳小時
date.getMinutes() // 回傳分鐘
date.getSeconds() // 回傳秒數
date.getMilliseconds() // 回傳毫秒數
// 有 get 同樣有 set 方法

有引數，回傳對應的日期

var date = new Date(2020, 1, 1, 8, 30, 10);
var date = new Date('2020/1/1 8:30:10');
var date = new Date('2020/01/01 08:30:10');
var date = new Date('2020-1-1 8:30:10');
// Sat Feb 01 2020 8:30:10 GMT+0800 (中國標準時間)

getTime()

回傳時間戳，即毫秒數

計算機紀元時間 1970 年 1 月 1 日 0 點 0 分 0 秒

時間戳：某個時間距離計算機紀元時間的經過的毫秒數

var dateTime = new Date().getTime(); // 回傳當前時間的時間戳
var date = new Date(dateTime); // 回傳時間戳對應時間
date.setTime(dateTime); // 以時間戳為標準設定時間

計時器

setInterval

每隔特定的毫秒數執行一次內部函式，從當前開始計時

回傳一個數字，是計時器的唯一標識，代表在所有計時器和延時器中的序號

是 window 下的方法
```
setInterval(function(){
    
}, 1000) // 匿名函式
funtion Test() {
    
}
setInterval(test, 1000);
setInterval('test()', 1000); // 字串形式傳入方法
```

clearInterval

清除計時器

var timer = setInterval(function(){}, 1000); // timer 是唯一標識，代表在所有計時器中的序號
clearInterval(timer);

延時器

setTimout

延遲指定時間執行一次內部函式

回傳一個數字，是延時器的唯一標識，代表在所有計時器中和延時器的序號
```
setTimeout(function(){
    
}, 1000) // 匿名函式
funtion Test() {
    
}
setTimeout(test, 1000);
```

clearTimeout

清除延時器

var timer = setTimeout(function(){}, 1000); // timer 是唯一標識，代表在所有計時器中的序號
clearTimeout(timer);

定時任務

描述

等待條件滿足時執行任務，設定時間內條件未滿足則執行回呼函式
引數
- re: 判斷條件函式，return 要執行 fn 的條件
- fn: 等待執行的目標函式
- space: setInterVal 的間隔時間，space || 100
- wait: setTimeOut 的等待時間，wait || 3000
- back: fn 未成功執行時回呼函式

代碼

function timer(re, fn, space, wait, back) {
				if (re()) {
					fn();
				} else {
					var interval = setInterval(function() {
						if (re()) {
							fn();
							clearInterval(interval);
							interval = null;
						}
					}, space || 100);
					setTimeout(function() {
						if (interval) {
							clearInterval(interval);
							interval = null;
							back && back();
						}
					}, wait || 3000);
				}
			}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/137738.html

標籤：JavaScript

上一篇：vue路由router-link

下一篇：vue狀態管理vuex+slot插槽+vue-resource請求