Js — 定时器

news2024/11/14 11:55:08

有两种：setInterval 和 setTimeout

间隔时间单位为毫秒

setInterval

每隔指定的毫秒数重复执行一个函数或代码

开启定时器：setInterval(函数，间隔时间)

作用：每隔一段时间调用这个函数

注意：它不是立即执行；而是先间隔一个间隔时间之后再执行

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body>
    <script>

        // 方法一
        // 匿名函数：不起名；直接定义函数
        setInterval(function(){
            console.log('一秒执行一次')
        },1000)

        //方法二
        // function fn(){
        //     console.log('一秒执行一次')
        // }
        // setInterval(fn,1000)

    </script>
</body>
</html>

关闭定时器：

let 变量名 = setInterval(函数，间隔时间)

clearInterval(变量名)

每个定时器都有一个独一无二的序号；所以定时器会返回一个id数字

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body>
    <script>

        function fn(){
            console.log('一秒执行一次')
        }
        let n = setInterval(fn,1000)
        // console.log(n)
        clearInterval(n)

    </script>
</body>
</html>

再此开启：

变量名 = setInterval(函数，间隔时间)

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body>
    <script>

        function fn(){
            console.log('一秒执行一次')
        }
        let n = setInterval(fn,1000)
        // console.log(n)
        clearInterval(n)

        //再开
        n = setInterval(fn,1000)
        console.log(n)

    </script>
</body>
</html>

setTimeout

和前面一样，区别在于 “在指定的毫秒数后执行一次函数或代码”

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body>
    <script>

        function fn(){
            console.log('一秒执行一次')
        }
        setTimeout(fn,1000)
  
    </script>
</body>
</html>