定时器（serTimeout()）的用法（进阶）

AVIC_501

已于 2023-05-19 17:25:29 修改

阅读量1.8k

点赞数 1

分类专栏： JavaScript 文章标签： javascript

于 2023-05-19 17:18:05 首次发布

本文链接：https://blog.csdn.net/li5306/article/details/130770710

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1、定时器

2、关闭定时器

1、定时器

setTimeout()是属于window的一个方法，我们都会去省略掉window这顶曾容器名称，setTimeout方法用处比较多，通常用在“页面刷新，延迟执行等等”。但是很多javaScript新手对setTimeout的用法不是很了解。今天就对setTimeout方法做个总结，我们来看下面的例子

<body>
    <button id='btn'>按钮</button>
</body>

两个参数。第一个参数是回调函数。时间到了自动触发。
第二个参数就是延时时间，单位是毫秒，1000ms = 1s;

   serTimeout(() => {
        oBtn.style.backgroundColor = 'red';
    },5000);

定时器分两种:
1:延时定时器
2:周期定时器

<script>
        const oBtn = document.getElementById('btn');
        oBtn.onclick = function(){
        //一个延时十年的定时器，意思是点击之后要过十年才会被触发
            setTimeout(() => {
                oBtn.style.backgroundColor = 'red';

            },1000 * 60 * 60 * 24 * 365 * 10)
        }
</script>

周期定时器的回调函数每隔指定时间都会重复触发

      setTnterval(() => {

            console.log('定时器')
        }，1000);

2、关闭定时器

<body>
 <button id='btn1'>开启定时器</button>
 <button id='btn2'>关闭定时器</button>
</body>

const oBtn1 = document.getElementById('btn1');
const oBtn2 = document.getElementById('btn2');

//周期定时器的编号
// 通过这个编号可以关闭指定定时器
let id = '';


//延时定时器编号
let id3 = '';

oBtn2.onclick = function(){

//参数就是指定选择器的编号，关闭周期定时器
clearInterval(id);
clearTimeout(id3);
}


oBtn1.onclick = function(){

//一个延时10年定时器
id3 = setTimeout(() => {

    oBtn = style.backgroundColor = 'red';
},1000 * 60 * 60 * 24 * 365 * 10);

//周期定时器的回调函数每个指定时间都会重复触发。
id = serInterval(() => {

    console.log('定时器')
}，1000)；

}

AVIC_501

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
定时器（serTimeout()）的用法（进阶）

setTimeout()是属于window的一个方法，我们都会去省略掉window这顶曾容器名称，setTimeout方法用处比较多，通常用在“页面刷新，延迟执行等等”。但是很多javaScript新手对setTimeout的用法不是很了解。今天就对setTimeout方法做个总结，我们来看下面的例子。
复制链接

扫一扫

专栏目录