前端学习<四>JavaScript——定时器

发布于:2024-04-24 ⋅ 阅读:(20) ⋅ 点赞:(0)

定时器的常见方法

  • setInterval():循环调用。将一段代码,每隔一段时间执行一次。(循环执行)

  • setTimeout():延时调用。将一段代码,等待一段时间之后再执行。(只执行一次)

备注:在实际开发中,二者是可以根据需要,互相替代的。

setInterval() 的使用

setInterval():循环调用。将一段代码,每隔一段时间执行一次。(循环执行)

参数

  • 参数1:回调函数,该函数会每隔一段时间被调用一次。

  • 参数2:每次调用的间隔时间,单位是毫秒。

返回值:返回一个Number类型的数据。这个数字用来作为定时器的唯一标识,方便用来清除定时器。

定义定时器

方式一:匿名函数

每间隔一秒,将 数字 加1:

     let num = 1;
    setInterval(function () {
        num ++;
        console.log(num);
    }, 1000);

方式二:

每间隔一秒,将 数字 加1:

     setInterval(fn,1000);
 ​
     function fn() {
        num ++;
        console.log(num);
     }
 ​

清除定时器

定时器的返回值是作为这个定时器的唯一标识,可以用来清除定时器。具体方法是:假设定时器setInterval()的返回值是参数1,那么clearInterval(参数1)就可以清除定时器。

setTimeout()的道理是一样的。

代码举例:

 <script>
     let num = 1;
 ​
     const timer = setInterval(function () {
         console.log(num);  //每间隔一秒,打印一次num的值
         num ++;
         if(num === 5) {  //打印四次之后,就清除定时器
             clearInterval(timer);
         }
 ​
     }, 1000);
 </script>
 ​

setTimeout() 的使用

setTimeout():延时调用。将一段代码,等待一段时间之后再执行。(只执行一次)

参数

  • 参数1:回调函数,该函数会每隔一段时间被调用一次。

  • 参数2:每次调用的间隔时间,单位是毫秒。

返回值:返回一个Number类型的数据。这个数字用来作为定时器的唯一标识,方便用来清除定时器。

定义和清除定时器

代码举例:

     const timer = setTimeout(function() {
         console.log(1); // 3秒之后,再执行这段代码。
     }, 3000);
 ​
     clearTimeout(timer);
 ​

代码举例:(箭头函数写法)

     setTimeout(() => {
         console.log(1); // 3秒之后,再执行这段代码。
     }, 3000);

setTimeout() 举例:5秒后关闭网页两侧的广告栏

假设网页两侧的广告栏为两个img标签,它们的样式为:

 <style>
     ...
     ...
 ​
 </style>
 ​

5秒后关闭广告栏的js代码为:

     <script>
         window.onload = function () {
             //获取相关元素
             var imgArr = document.getElementsByTagName("img");
             //设置定时器:5秒后关闭两侧的广告栏
             setTimeout(fn,5000);
             function fn(){
                 imgArr[0].style.display = "none";
                 imgArr[1].style.display = "none";
             }
         }
     </script>