js - 计时器、同步异步

原创已于 2022-11-10 11:57:30 修改

· 579 阅读

0 ·

版权

文章标签：

#javascript #前端 #开发语言

于 2022-11-08 11:35:26 首次发布

本文探讨JavaScript中的计时器概念，并深入解析同步与异步操作，结合倒计时案例进行说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/*
    1. 同步：按步骤执行
    2. 异步：同时执行（计时器、事件绑定）

    注： 先执行所有的同步语句，在执行异步！！！！
*/
console.log(1);
setTimeout(function(){//异步,等待同步执行完毕，再执行
console.log(2);
},0)
console.log(3);

//1 3 2


/**
 * 计时器
 *  - 间歇性计时器
 *      ：每间隔多少时间就执行一次函数
 *      设定计时器：timer = setInterval(函数,毫秒数);
 *      取消计时器：clearInterval(timer);
 *  - 一次性计时器、延时器、定时器、倒计时定时器
 *      ：倒计时多少时间以后执行函数
 *      设定定时器：timer = setTimeout(函数,毫秒数);
 *      取消计时器：clearTimeout(timer);
 *  补充：timer，表示这个定时器是页面上的第几个定时器
 *          这个 `timer` 就是用来关闭定时器的数字
 */

倒计时案例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF_8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒计时</title>
    
</head>
<body>
    
    <script>
        var timer = setInterval(function(){
            var future = new Date('2022/11/6');
            var date = new Date();
            var minus = Math.floor((future.getTime() - date.getTime()) / 1000);
            //时
            var hours = Math.floor(minus / 60 / 60);
            //分
            var minutes = Math.floor((minus - hours * 60 * 60) / 60);
            //秒
            var seconds = minus % 60;
            //document.write(toDoub(hours) + ":" + toDoub(minutes) + ":" + toDoub(secounds));
            document.title = toDoub(hours) + ":" + toDoub(minutes) + ":" + toDoub(seconds);

            if(hours == 0 && minutes == 0 && seconds == 0){
                clearInterval(timer);
            }

            
        },1000)
        function toDoub(n){
            return n < 10 ? "0" + n : n;
        }
    </script>
</body>   
</html>