setTimeout和setInterval定时器用法和区别

最新推荐文章于 2024-07-29 13:58:45 发布

偲楠爱前端

最新推荐文章于 2024-07-29 13:58:45 发布

阅读量245

点赞数

文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/ChenHN98/article/details/121127242

版权

语法规范：

1 window.setTimeout(调用函数,延时时间)

2 window.setInterval(调用函数,延时时间)

相同点：

1 这个window在调用的时候可以省略

2 这个延时时间单位是毫秒但是可以省略如果默认是0

3 这个调用函数可以直接写函数还可以写函数名或者'函数名（）'

4 页面中可能有多个计时器我们经常会给定时器加标识符也就是名字

不同点：

setTimeout只会调用一次setInterval重复调用根据延长时间

<!DOCTYPE html>
<html lang="en">
<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>

       function callback () {
           console.log('我是setTimeout');
       }
       setTimeout(callback,3000);
       //window.clearTimeout(timeout ID)停止计时器


        window.addEventListener('load',function () {//窗口加载事件
            var begin=document.querySelector('.begin');
            var stop=document.querySelector('.stop');
            var timer=null;//设置全局变量 null是一个空对象
            begin.addEventListener('click',function () {
                timer=setInterval(function(){
                    console.log('我是setInterval');
                },4000);
            })
            stop.addEventListener('click',function () {
                clearInterval(timer);//停止计时器
            })
        })

    </script>
    <button class="begin">开始</button>
    <button class="stop">结束</button>
</body>
</html>

偲楠爱前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
setTimeout和setInterval定时器用法和区别

语法规范：1window.setTimeout(调用函数,延时时间)2window.setInterval(调用函数,延时时间)相同点：1这个window在调用的时候可以省略2这个延时时间单位是毫秒但是可以省略如果默认是03这个调用函数可以直接写函数还可以写函数名或者'函数名（）'4页面中可能有多个计时器我们经常会给定时器加标识符也就是名字不同点：setTimeout只会调用一次setInterval重复调用根据延长时间<!...
复制链接

扫一扫