首页 > 其他分享> > 延时器和定时器

延时器和定时器

2021-12-09 11:33:12 作者：互联网

延时器

setTimeout() 方法：延时器

window.setTimeout(function, milliseconds);

第一个参数是要执行的函数。
第二个参数指示执行之前的毫秒数。

案例演示：单击按钮，等待 3 秒，然后控制台会输出 "Hello"

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button id="btn">按钮</button>

<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var btn = document.getElementById("btn");

    btn.onclick = function () {
        // 创建延时器
        var timer = setTimeout(function () {
            console.log("Hello");
        }, 3000);
        
        // 清除延时器
        // clearTimeout(timer);        
    };
</script>
</body>
</html>

定时器

setInterval() 方法：定时器

setInterval() 方法在每个给定的时间间隔重复给定的函数。

window.setInterval(function, milliseconds);

第一个参数是要执行的函数。
第二个参数每个执行之间的时间间隔的长度。

案例演示：单击按钮，每隔一秒向控制台输出 "Hello"

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button id="btn">按钮</button>

<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var btn = document.getElementById("btn");

    btn.onclick = function () {
        // 创建定时器
        var timer = setInterval(function () {
            console.log("Hello");
        }, 1000);

        // 清除定时器
        // clearInterval(timer);
    };
</script>
</body>
</html>

标签：function,定时器,timer,延时器,var,btn
来源： https://www.cnblogs.com/jiangxin123/p/15666288.html