JS-延时函数

延时函数延时函数1.概念2.与定时器的区别3.细节4.代码演示5.总结6.延时执行(删除)延时函数JavaScript 中定时器函数的构成，能够基于定时器创建定的定时任务1.概念延时函数是实现程序暂缓执行的技术延时函数和间歇函数统称为定时器或定时任务2.与定时器的区别间歇函数(定时器)的特征是不间断的重复执行而延时函数只会执行 1 次。结合递归函数可以使用 setTimeout实现setInter

Jikel

12126人浏览 · 2021-06-15 16:59:53

Jikel · 2021-06-15 16:59:53 发布

延时函数

延时函数

延时函数

JavaScript 中定时器函数的构成，能够基于定时器创建定的定时任务

1.概念

延时函数是实现程序暂缓执行的技术
延时函数和间歇函数统称为定时器或定时任务

2.与定时器的区别

间歇函数(定时器)的特征是不间断的重复执行
而延时函数只会执行 1 次。

结合递归函数可以使用 setTimeout实现setInterval 一样的功能！

3.细节

1.setInterval 间歇函数也会延时执行

2.setTimeout 结合递归函数创建定时任务时，是立即执行定的

3.因此实践中经常使用 setTimeout 配合递归来替代 setInterval ！

4.代码演示

<!DOCTYPE html>
<html lang="zh-CN">

<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>Document</title>
</head>

<body>
    <script>
        // 延迟函数 : 1.获取实时系统时间 2.通过延迟函数实现信息提示
        // 语法: setTimeout(函数名,延迟时间)

        // setTimeout调用函数,执行一次
        // setTimeout第二个参数标签延迟的时间,代码多久执行一次

        // 代码演示:
        function fn() {
            console.log(1);
        }
        setTimeout(fn, 2000)
    </script>
</body>

</html>

详细代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* body {
          /* padding: 0 40px; */
        /* } */

        p {
            color: #333;
        }

        .box {
            width: 200px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <h3>延时函数</h3>
    <p>延时函数实现程序暂缓执行的技术。</p>

    <button class="stop">停止</button>
    <div class="box"></div>
    <!-- 结合递归(自己调用自己)/setTimeout -->
    <!-- 实际开发中利用setTimeout来模拟setInterval函数 配合递归 -->
    <script>
        //  function fn(){
        //      document.write('我来了┗|｀O′|┛ 嗷~~')
        //  }
        // setTimeout(fn ,3000)
        // setTimeout
        // function fn() {
        //     document.write('我来了┗|｀O′|┛ 嗷~~')
        // }
        // fn()                      // 曾经是先调用一下
        // setInterval(fn, 1000)



        // 工作中,常用递归函数+setTimeout 来模拟定时器的效果
        // function add() {
        //     document.write('常用递归函数+setTimeout 来实现定时器')
        //     setTimeout(add, 3000)
        // }
        // add()



        // 结束setTimeout:
        let box=document.querySelector('.box')
        let btn=document.querySelector('.stop')
        let time
           function clock(){
               let now=new Date()
               let year=now.getFullYear()
               let month=now.getMonth()+1
               let ri=now.getDate()
               let h=now.getHours()
               let f=now.getMinutes()
               let m=now.getSeconds()
               box.innerHTML=`${year}年${month}月${ri}日${h}:${f}:${m}`
               time=setTimeout(clock,1000)
           }
           clock()
           //setInterval(clock,1000)
           btn.addEventListener('click',function(){
               //结束延时定时器  clearTimeout(函数名)
               clearTimeout(time)
           })
    </script>
</body>

</html>

5.总结

1.setInterval 的特征是重复执行，首次执行会延时

2.setTimeout 的特征是延时执行，只执行 1 次

3.setTimeout 结合递归函数，能模拟 setInterval 重复执行，且不会有延时

1.clearTimeout 清除由 setTimeout 创建的定时任务

6.延时执行(删除)

在这里插入图片描述
点击以后,延时3秒执行
1
2
3

<!DOCTYPE html>
<html lang="zh-CN">

<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>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <input type="button" name="" value="删除div">
    <div class="msg">删除成功</div>
    <script>
        let btn = document.querySelector('input')
        let div = document.querySelector('div')
        btn.addEventListener('click', function () {
            div.style.display = 'block'
            setTimeout(fn, 3000)
        })
        function fn() {
            div.style.display = 'none'
        }
    </script>
</body>

</html>