JS 计时|极客笔记

JS 计时

在前端开发中，经常会遇到需要计时的场景，比如倒计时、计时器等。JavaScript提供了多种方法来实现计时功能。本文将详细介绍JavaScript中计时相关的知识和常用方法。

基础概念

在计时的实现中，有几个基本概念需要了解：

时间单位：常见的时间单位有毫秒(ms)、秒(s)、分(min)、小时(h)等。
时间戳（timestamp）：指从某一固定时间（通常是1970年1月1日00:00:00 UTC）到当前时间的毫秒数，可以通过Date.now()方法获取。
定时器（timer）：用于定时执行指定的代码，包括setTimeout()和setInterval()两种常见形式。

延时执行

延时执行是指在一段时间后执行某段代码。在JavaScript中，我们通常使用setTimeout()方法来实现延时执行。

setTimeout(function() {
    console.log('Hello World!');
}, 2000); // 2秒后输出'Hello World!'

上述代码表示在2秒后输出Hello World!。setTimeout()方法接受两个参数：第一个参数是要执行的函数或代码块，第二个参数是延时的时间（单位为毫秒）。

循环执行

循环执行是指在一定时间间隔内重复执行某段代码。在JavaScript中，我们通常使用setInterval()方法来实现循环执行。

let count = 0;
let interval = setInterval(function() {
    count++;
    console.log('Count:', count);
    if (count === 5) {
        clearInterval(interval);
    }
}, 1000); // 每秒输出一次count，共输出5次

上述代码表示每隔1秒输出一次count，直到count达到5为止。setInterval()方法接受两个参数：第一个参数是要重复执行的函数或代码块，第二个参数是时间间隔（单位为毫秒）。

定时器的清除

在使用定时器的过程中，我们通常会需要在某个条件下停止定时器的执行。可以通过clearTimeout()和clearInterval()方法来清除定时器。

clearTimeout()：用于清除使用setTimeout()创建的定时器。
clearInterval()：用于清除使用setInterval()创建的定时器。

let timer = setTimeout(function() {
    console.log('This will not be executed.');
}, 5000);

clearTimeout(timer); // 清除定时器

上述代码表示定时器在5秒后执行某段代码，但在之前被清除了。因此，This will not be executed.将不会被输出。

计时器的应用

计时器在前端开发中有着广泛的应用，包括但不限于：

倒计时功能：网站的促销活动、限时特惠等需要倒计时展示。
刷新功能：定时刷新页面内容或获取最新数据。
游戏开发：游戏中计时、倒计时等功能的实现。

下面我们结合一个简单的示例来演示一个倒计时的实现。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>倒计时示例</title>
</head>
<body>
    <div id="countdown"></div>

    <script>
        let countdownElement = document.getElementById('countdown');
        let countdownDate = new Date('2021-10-01 00:00:00').getTime();

        let interval = setInterval(function() {
            let now = new Date().getTime();
            let distance = countdownDate - now;

            let days = Math.floor(distance / (1000 * 60 * 60 * 24));
            let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            let seconds = Math.floor((distance % (1000 * 60)) / 1000);

            countdownElement.innerHTML = ` ${days} 天$ {hours} 时  ${minutes} 分$ {seconds} 秒`;

            if (distance < 0) {
                clearInterval(interval);
                countdownElement.innerHTML = '活动已结束';
            }
        }, 1000);
    </script>
</body>
</html>

上述示例代码实现了一个倒计时的功能，显示距离2021年10月1日0时0分0秒的剩余时间。每秒更新一次显示的剩余时间，直到时间到达后显示活动已结束。