巧用JavaScript定时器3秒自动关闭广告

文章介绍了JavaScript中的定时器机制,包括setTimeout用于一次性执行代码和setInterval用于周期性执行代码。setTimeout的三种调用方式以及如何通过clearTimeout清除定时器。还提供了一个3秒后自动关闭广告的案例作为示例。
摘要由CSDN通过智能技术生成

在浏览网页的过程中,我们经常可以看到轮播图效果,即每隔一段时间,图片就会自动切换一次;或者在商品页面看到商品倒计时功能,这些动画就用到了定时器。定时器就是在指定时间后执行特定操作,或者让程序代码每隔一段时间执行一次,实现间歇操作。

在JavaScript中,提供了两组方法用于定时器的实现,具体方法如表8-1所示。

表8-1定时器方法

 

表8-1中,setTimeout0和setlnterval0方法都可以在一个固定时间段内执行代码,不同的是前者只执行一次代码,而后者会在指定的时间后自动重复执行代码。

在实际开发中,我们可以通过setTimeout0方法实现函数的一次调用,并且可以通过clearTimeout0来清除setTimeout()定时器。

setTimeout()和setInterval()的语法格式如下。

setTimeout(调用的函数,[延迟的毫秒数])
setInterval(调用的函数,[延迟的毫秒数])

在上述语法中,第1个参数表示到达第2个参数设置的等待时间后要执行的代码,也可以传入一个函数,或者函数名,第2个参数的时间单位以毫秒(ms)计。

下面我们以setTimeout()为例进行代码演示,具体代码如下。

//参数形式1:用字符串表示一段代码
setTimeout('alert ("JavaScript");', 3000);
//参数形式2:传人一个匿名函数
setTimeout (function () {
alert ('JavaScript');
},3000);
//参数形式3:传入函数名
setTimeout(fn, 3000);
function fn(){
console.log('JavaScript');
}

在上述代码中,当参数为一个函数名时,这个函数名不需要加()小括号,否则就变成了立即执行这个函数,将函数执行后的返回值传入。如果延迟的毫秒数省略时,默认为0。

在实际开发中,考虑到一个网页中可能会有很多个定时器,所以建议用一个变量保存定时器的id(唯一标识),若想要在定时器启动后,取消该定时器操作,可以将setTimeost()的返回值(定时器id)传递给clearTimeout)方法。示例代码如下。

//在设置定时器时,保存定时器的唯一标识
var timer = setTimeout (fn, 3000):
//如果要取消定时器,可将唯一标识的传递给clearTimeout ()方法
clearTimeout(timer);


【案例】3秒后自动关闭广告

本案例将会使用sefTimeoat()实现3秒后自动关闭广告的效果,具体代码如下。

<body>
<saript>
conaole.log('广告是示')
var timer = setTimeout(fn, 3000):
function fn(){
console.log('广告关闭了');
}
</script>
</body>

上述代码中,第4行代码定义了一个timer 变量用于保存setTimeout定时器的功能为3000ms后执行fn函数。第5-7行代码定义处理函数fn,并“打印广告关闭了”。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript中,常用的定时器方法有四个:setTimeout、setInterval、clearTimeout和clearInterval。 setTimeout函数用于在指定的时间后执行一次JavaScript代码。它的格式为setTimeout("js语句", 定时时间),其中定时时间的单位是毫。例如,使用setTimeout的语法如下: setTimeout(function(){ console.log("炸弹定时器,到达时间后执行"); }, 5000); 这段代码会在5后执行一次console.log语句。 setInterval函数用于按照指定的时间间隔重复执行一段JavaScript代码。它的格式为setInterval(函数, 时间),其中时间的单位是毫。例如,使用setInterval的语法如下: var i = 0; setInterval(function(){ console.log(i); i++; }, 1000); 这段代码会每隔1钟输出一次i的值,并将i的值加1。 如果需要停止定时器的执行,可以使用clearTimeout和clearInterval函数。它们的格式分别为clearTimeout(需要停止的对象)和clearInterval(需要停止的对象)。例如,使用clearTimeout和clearInterval的语法如下: var num1 = setTimeout(function(){}, 时间); var num2 = setInterval(function(){}, 时间); clearTimeout(num1); clearInterval(num2); 这段代码会先定义两个定时器对象num1和num2,然后通过调用clearTimeout和clearInterval函数来关闭对应的定时器。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [简述js定时器的用法](https://blog.csdn.net/suorce/article/details/82841781)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [Javascript定时器的使用方法](https://blog.csdn.net/qq_57340195/article/details/124441862)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值