JavaScript 定时器 #yyds干货盘点#

2021年11月22日 阅读数:3
这篇文章主要向大家介绍JavaScript 定时器 #yyds干货盘点#,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

setInterval

let timerId = setInterval(func|code, delay, arg1, arg2, ...)

按照指定的周期(单位毫秒),重复调用一个函数或执行一个代码段。setInterval() 方法若是没有被 clearInterval() 方法关闭或页面关闭,那么会一直调用下去。javascript

setInterval的参数有多个:
参数 必/选填 描述
func | code 必填 调用的函数后要执行的函数或代码字符串
delay 必填 执行代码前所需的时间,单位为毫秒,能够不填,默认值是 0
arg1,arg2… 选填 要传入被执行函数(或代码字符串)的参数列表
  • 若是第一个参数为代码段,那么setInterval()方法能够选填。
  • 若是第一个参数为函数,那么setInterval()方法能够有多个参数。

clearInterval

取消由 setInterval() 设置的 timer。html

clearInterval(intervalID)

该方法只有一个参数,该参数timeoutID为您要取消定时器的标识符。该ID由相应的setTimeout()调用返回。java

示例:6秒倒计时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒计时计时器</title>
</head>
<body>
<p id="show">6</p>
<script>
    let counter = 6;
    let show = document.getElementById("show");
    function timer() {
        let timerId = setInterval(() => {
            counter = counter -1;
            show.innerText = counter;
            if(counter <=0){
                clearInterval(timerId);
            }
        }, 1000);
    }

    timer();  //调用方法
</script>

</body>
</html>

结果:
请添加图片描述markdown

setTimeout

let timerId = setTimeout(func|code, delay, arg1, arg2, ...)
  • setTimeout:在指定的延迟时间以后调用一个函数或者执行一个代码片断。
  • clearTimeout:方法可取消由 setTimeout() 方法设置的 timeout。
  • setTimeout()返回一个整数,表示定时器的编号,之后能够用来取消这个定时器。
  • setTimeout()容许咱们将函数推迟到一段时间间隔以后再执行。
setTimeout()参数这里和setInterval()的参数是同样的:
参数 必/选填 描述
func | code 必填 调用的函数后要执行的函数或代码字符串
delay 必填 执行代码前所需的时间,单位为毫秒,能够不填,默认值是 0
arg1,arg2… 选填 要传入被执行函数(或代码字符串)的参数列表

注意:setTimeout() 与setInterval()的区别是它们的执行次数不一样。setTimeout() 只执行一次setInterval()是每间隔给定的时间周期性执行。ide

clearTimeout

clearTimeout() 方法可取消由 setTimeout() 设置的 timer。
该方法只有一个参数,该参数timeoutID为您要取消定时器的标识符。该ID由相应的clearTimeout()调用返回。函数

示例:模拟6秒后发送消息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模拟邮件延迟发送</title>
</head>
<body>
<script>
    function timer() {
        let timerId = setTimeout(() => {
            alert("开始发送消息!")
            clearTimeout(timerId);
        }, 5000);
    }

    timer();  //调用方法
</script>

</body>
</html>

结果:
请添加图片描述code