js window对象中 setTimeout方法和setInterval方法的作用,用法与区别。

window对象作为BOM中的顶层对象,而作为window对象中使用频繁的setInterval方法和setTimeout方法更显得尤为重要。

① setInterval() 方法

定义和用法

① setInterval() 方法可按指定的周期(以毫秒记)来调用函数或计算表达式。
② setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

语法

setInterval(code,millisec) ;
code (必需)。要调用的函数或要执行的代码串。// 传一个函数 或者代码串
millisec(必需)。周期性执行 code 的时间间隔,以毫秒计。 // 自定义设置的周期 (以毫秒计)

返回值

该函数有返回值,从而传递给 window.clearInterval() 从而取消对 code 的周期性执行。

setInterval()使用

function a(){
                var i=0;
                console.log(++i);
            }
        setInterval(a,3000); // 参数a 就是传递需要执行的函数 , 3000 就是自定义周期 3000毫秒执行一次

结果: 函数a会每隔三秒执行一次。
如果需要停止函数a的执行,则可以定义一个变量接收setInterval返回的值,将该值作为clearInterval()的参数执行该方法,就可以结束setInterval()的执行。

② setTimeout() 方法

定义和用法

setTimeout() 方法用于指定毫秒数后调用函数或计算表达式。

语法

setTimeout(code,millisec) ;
code (必需)。要调用的函数后要执行的 JavaScript 代码串。// 传一个函数 或者代码串
millisec (必需)。在执行代码前需等待的毫秒数 // 自定义时间 (以毫秒计)

返回值

该函数也有返回值,可以传递给 window.clearTimeout () 从而取消对 code 的执行。

setTimeout()用法

function a(){
                console.log("气球爆炸");
            }
            var time = setTimeout(a,5000); //参数a 就是设置要执行的函数  5000自定义设置时间,

结果:函数a会在5秒后执行,导致气球爆炸。
如果想要在气球爆炸之前停止该函数,则用time接收函数的返回值作为clearTimeout()参数执行该方法,则可以阻止这悲剧的发生。

③ 两者的区别

相同点 : 两者语法一样。
不同点 : setTimeout 只执行一次 而setInterval会一直执行
setInterval被重复开启 是无法关闭
setTimeout被重复开启几次 就需要关闭与开启同样的次数

注意:setTimeout()与setInterval() 相比,编码要少一些,但做复杂控制时, setTimeout() 的返回值没有及时清除会经常造成不可预料的意外。
在使用setTimeout()或setInterval() 的时候,一定要注意的他们的返回值的问题,否则会出现各种异常。

其实采用setTimeout方法也可以实现setInterval的效果。
只需要在函数里面,递归的使用setTimeout方法即可。

//  如果要用setTimeout实现setInterval效果 则需要递归调用
            (function a(){
                console.log("气球爆炸");
                var time = setTimeout(a,3000); //递归调用自己
            })();

结果 : 每隔三秒就有一个气球会爆炸。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
下面是一个简单的示例,实现的是一个倒计时器,时长为两个小时,每秒钟更新一次。 HTML 代码: ```html <div id="countdown"></div> ``` JavaScript 代码: ```javascript // 获取显示倒计时的元素 var countdownElement = document.getElementById('countdown'); // 设置倒计时的时长,单位为秒 var duration = 2 * 60 * 60; // 定义一个函数,用于更新倒计时的显示 function updateCountdown() { // 计算剩余的小时数、分钟数和秒数 var hours = Math.floor(duration / 3600); var minutes = Math.floor((duration % 3600) / 60); var seconds = duration % 60; // 格式化显示字符串 var displayString = ('0' + hours).slice(-2) + ':' + ('0' + minutes).slice(-2) + ':' + ('0' + seconds).slice(-2); // 更新显示 countdownElement.textContent = displayString; // 减少剩余时间 duration--; // 如果倒计时结束,清除定时器 if (duration < 0) { clearInterval(intervalId); countdownElement.textContent = '倒计时结束'; } } // 初始化倒计时显示 updateCountdown(); // 每秒钟更新一次倒计时 var intervalId = setInterval(updateCountdown, 1000); ``` 在上面的代码,我们首先获取了一个用于显示倒计时的元素,然后设置了倒计时的时长,单位为秒。接着,我们定义了一个名为 `updateCountdown` 的函数,用于更新倒计时的显示。在这个函数,我们首先计算了剩余的小时数、分钟数和秒数,然后格式化显示字符串,并更新了倒计时的显示。最后,我们减少了剩余时间,并检查倒计时是否结束,如果结束,则清除定时器,并显示倒计时结束的消息。 在初始化倒计时显示后,我们使用 `setInterval` 方法每秒钟调用一次 `updateCountdown` 函数,实现了倒计时的功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值