• 【JavaScript】一文了解定时器的使用

    🍈作者简介：大家好，我是亦世凡华、渴望知识储备自己的一名在校大学生

    🍇个人主页：亦世凡华、的博客

    🍓系列专栏：JavaScript专栏

    🥝推荐一款模拟面试刷题神器🔥：点击跳转进入网站

    目录

    🏍️定时器

    🍇setTimeout() 超时定时器

    🍈clearTimeout() 清除超时定时器

    🍉setInterval() 间隔定时器

    🍊clearInterval() 清除间隔定时器

    🏍️定时器

    window对象给我们提供了两种定时器

    🍇setTimeout() 超时定时器

    setTimeout()方法用于设置一个定时器，该定时器在定时器到期后执行

    window.setTimeout(调用函数,[延迟的毫秒数])；
    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.     <script>
    11.         // setTimeout
    12.         setTimeout(function(){
    13.             // console.log('看我执行的时间');
    14.         },2000) //延迟单位是毫秒数
    15.         function time(){
    16.             console.log('我执行了多久');
    17.         }
    18.         var timer = setTimeout(time,2000)
    19.         // setTimeout('time()',2000) 不提倡这种写法
    20.     script>
    21. body>
    22. html>

    总结：

    1.window可以省略

    2.调用函数可以直接写函数或函数名或采用字符串 '函数名()'三种形式。第三章不推荐

    3.延迟的毫秒数默认是0，如果写必须是毫秒

    4.定时器如果有很多的话需要给定时器赋值一个标识符

    setTimeout()这个调用函数也称为回调函数，普通函数是按照代码顺序直接调用，而这个函数需要等待时间，时间到了才会去调用这个函数，因此称为回调函数。简单理解：回调就是回头调用的意思，上一件事干完再回头调用这个函数。

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body><img src="./img1.jpg">
    10.     <script>
    11.         var img = document.querySelector('img');
    12.         setTimeout(function(){
    13.             img.style.display = 'none';
    14.         },5000)
    15.     script>
    16. body>
    17. html>

    🍈clearTimeout() 清除超时定时器

    clearTimeout()取消了先前调用setTimeout()建立的定时器

    window.clearTime(timeout ID)
    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.     <button>阻止按钮button>
    11.     <script>
    12.         var time = setTimeout(function(){
    13.             console.log('快阻止我吧');
    14.         },4000)
    15.         var btn = document.querySelector('button');
    16.         btn.addEventListener('click',function(){
    17.             clearTimeout(time);
    18.         })
    19.     script>
    20. body>
    21. html>

    注意 ：

    1.window可以省略

    2.里面的参数就是定时器的标识符

    🍉setInterval() 间隔定时器

    setInterval()方法反复调用一个函数，每隔这个时间就去调用一次回调函数。

    window.setInterval(回调函数,[间隔的毫秒数])

    倒计时案例 

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         span{
    10.             background-color: #000;
    11.             display: block;
    12.             float: left;
    13.             margin-right: 10px;
    14.             margin-top: 300px;
    15.             width: 40px;
    16.             height: 40px;
    17.             color: #fff;
    18.             text-align: center;
    19.             line-height: 40px;
    20.         }
    21.         .hour{
    22.             margin-left: 45%;
    23.         }
    24.     style>
    25. head>
    26. <body>
    27.     <div>
    28.         <span class="hour">1span>
    29.         <span class="mintue">2span>
    30.         <span class="second">3span>
    31.     div>
    32.     <script>
    33.         // 1.获取元素
    34.         var hour = document.querySelector('.hour');
    35.         var mintue = document.querySelector('.mintue');
    36.         var second = document.querySelector('.second');
    37.         var inputTime = +new Date('2022-7-27 18:00:00'); // 返回的是用户输入时间的总的毫秒数
    38.  
    39.         // 第一次执行也是间隔毫秒数，因此刚刷新页面会有空白
    40.         countDown();//我们先调用这个函数，防止第一次刷新页面有空白
    41.         
    42.         // 2.开启定时器
    43.         setInterval(countDown,1000)
    44.  
    45.         function countDown () {
    46.             var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
    47.             var times = (inputTime - nowTime) / 1000; // time是剩余时间总的秒数
    48.             var h = parseInt(times / 60 / 60 % 24); //计算小时
    49.             h = h < 10 ? '0' + h : h;
    50.             hour.innerHTML = h;//把剩余的小时给 黑色的小时盒子
    51.             var m = parseInt(times / 60 % 60); //计算分数
    52.             m = m < 10 ? '0' + m : m;
    53.             mintue.innerHTML = m;
    54.             var s = parseInt(times % 60); //计算当前秒数
    55.             s = s < 10 ? '0' + s : s;
    56.             second.innerHTML = s;
    57.         }
    58.     script>
    59. body>
    60. html>

    🍊clearInterval() 清除间隔定时器

    clearInterval()方法取消了先前调用setInterval()建立的定时器。

    window.clearInterval(interval ID)
    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.     <button class="begin">开启定时器button>
    11.     <button class="stop">关闭定时器button>
    12.     <script>
    13.         var begin = document.querySelector('.begin');
    14.         var stop = document.querySelector('.stop');
    15.         var timer = null;//全局变量
    16.         begin.addEventListener('click',function(){
    17.             timer = setInterval(function(){
    18.                 console.log('我在执行哦');
    19.             },1000)
    20.         })
    21.         stop.addEventListener('click',function(){
    22.             clearInterval(timer)
    23.         })
    24.     script>
    25. body>
    26. html>

    总结

    setTimeout和setInterval的区别：

    setTimeout：延时时间到了就去执行回调函数，只调用一次就结束这个定时器

    setInterval：每隔这个延时时间就去调用回调函数，会重复调用这个回调函数

    🍃JavaScript的学习还是要以多练习为主，想要练习JavaScript的朋友，推荐可以去牛客网看一看，链接：牛客网 里面的IT题库内容很丰富，属于国内做的很好的了，最重要的是里面的资源是免费的，是课程+刷题+面经+求职+讨论区分享，一站式求职学习网站，感兴趣的可以去看看。

    呜呜~，原创不易。

  • 相关阅读:
    TableView (cocos-2dx lua)
    omnipathr官网教程 mistr
    基于JAVA社区老年人信息管理系统计算机毕业设计源码+系统+mysql数据库+lw文档+部署
    数据结构-并查集
    单张图像3D重建：原理与PyTorch实现
    Redis脑裂现象
    如何把图片分辨率调低？如何调整照片的分辨率？
    案例分享：某汽车企业通过龙智拓展Jira功能，实现高效项目管理
    栈队列数组试题(四)——数组和特殊矩阵
    uniapp 写播放器
  • 原文地址：https://blog.csdn.net/qq_53123067/article/details/126002486