html清空计时器,js设置定时器和清除定时器
一、前言
在前端,我们有很多功能需要用到定时器。譬如轮询,譬如定时关闭弹框,譬如实现秒表,譬如一段时间后跳转页面等等。因此,我们需要掌握定时器的用法。
二、设置定时器
目前window对象提供有两个方法来实现定时器的效果,分别是window.setTimeout()和window.setInterval()。
其中setInterval()的作用是:使一段代码每过指定时间就运行一次;常用于轮询。
setInterval(function(){
console.log("这是一个setInterval定时器!");
}, 1000);//1000ms=1s,设定的代码循环运行时的间隔时间,单位为ms
而setTimeout()的作用是:使一段代码在指定时间后运行;常用于一次性定时器及轮询。注意,setTimeout()是只运行一次代码的,若要用setTimeout()进行轮询,需要在setTimeout()的代码里再调起当前setTimeout()所属函数,才能达到循环的效果。
setTimeout(function(){
console.log("这是一个setTimeout定时器!");
}, 1000);//1000ms=1s,设定的代码等待运行的时间,单位为ms
三、定时器的缺陷
1.定时器最大的优点,同时也是它最容易出错的一点:定时器所有任务都是由同一个线程来调度。
正是因此,定时器简单易用。同时这也导致了定时器所有任务都是串行执行的,同一时间只能有一个任务在执行,前一个任务的延迟或异常都将会影响到之后的任务,即定时器的重叠。
2.定时器不会被自动销毁,即它所占内存无法被自动回收。如果不手动清除定时器,它会一直占用内存资源。更可怕的是,一旦使用定时器进行轮询,定时器所占的内存资源将会不断上升,若与定时器重叠问题一起出现,常导致页面卡顿。
所以,我们必须学会清除定时器。
四、清除定时器
定时器在调用时,都会返回一个整型的数字,该数字代表定时器的序号,即第多少个定时器,我们可以利用定时器的序号对定时器进行清除。
因此在清除定时器时,我们常在设置定时器时,定义一个变量来记录定时器返回的定时器序号,然后在定时器完成后,调用该序号清除对应定时器。
目前有两个方法来清除定时器,分别对应两种定时器的方法。
其一是clearInterval(obj),对应setInterval()定时器;
var intervalBox = setInterval(function(){
console.log(intervalBox);//打印interval定时器,查看interval定时器效果
}, 1000);
clearInterval(intervalBox);//清除interval定时器
其二是clearTimeout(obj),对应setTimeout()定时器;
var timeoutBox = setTimeout(function(){
console.log(timeoutBox);//打印interval定时器,查看interval定时器效果
}, 1000);
clearTimeout(timeoutBox);//清除timeout定时器
五、总结示例
为实现相应功能,定时器不可或缺性,但是若不规范使用定时器,将会造成巨大困扰,轻则内存资源被严重占用,页面卡顿,重则逻辑断裂,出现重大bug。因此我们需要对定时器规范使用,及时清除。
我对定时器的使用有八字总结:随时使用,即时清除。简单来说,每设置一个定时器,都要对应清除,示例代码如下:
定时器
开始Interval
停止Interval
正常Timeout定时器
循环的Timeout定时器
停止Timeout
var intervalBox;//interval定时器存储器
//设置interval定时器
functionstartInterval() {
clearInterval(intervalBox);//初始化interval定时器,防止定时器重叠
intervalBox = setInterval(function(){//设置interval定时器
console.log(intervalBox);//打印interval定时器,查看interval定时器效果
}, 1000);//定时器间隔时间1000ms
}//结束interval定时器
functionstopInterval() {
clearInterval(intervalBox);//清除interval定时器
}var timeoutBox;//timeout定时器存储器
//设置正常的timeout定时器
functionstartTimeout() {
clearTimeout(timeoutBox);//初始化timeout定时器,防止定时器重叠
timeoutBox = setTimeout(function(){//设置timeout定时器
console.log(timeoutBox);//打印timeout定时器,查看timeout定时器效果
clearTimeout(timeoutBox);//清除当前timeout定时器,timeout定时器只运行一次代码,直接清掉它
//location.href="timer.html";//一段时间后跳转页面是setTimeout的常用场景之一
}, 1000);
}//设置循环的timeout定时器
functionstartTimeoutTwo() {
clearTimeout(timeoutBox);//初始化timeout定时器,防止定时器重叠
timeoutBox = setTimeout(function(){
console.log(timeoutBox);//打印timeout定时器,查看timeout定时器效果
startTimeoutTwo();//循环调用函数自身,以达到循环的效果
}, 1000);
}//结束循环的timeout定时器
functionstopTimeout() {
clearTimeout(timeoutBox);
}
原文:https://www.cnblogs.com/chenyoumei/p/12695381.html
html清空计时器,js设置定时器和清除定时器相关推荐
- android h5app息屏定时器,H5案例分享:JS设置定时器和清除定时器
JS设置定时器和清除定时器 在做项目中难免会碰到需要实时刷新,动画依次出现等等需求,这时候就需要定时器登上我们的代码舞台了,所以今天我们就先来了解一下JS定时器的设置和清除吧. 一.启用定时器 win ...
- 设置定时器与清除定时器
设置定时器与清除定时器 (作者:杨先金:撰写时间:2019年1月18日) 一, 设置定时器 下面我们来讲讲如何设置一个定时器,首先你得定义一个空的变量(比如:timer)来接收定时器,相当于把它存放到 ...
- JS定时器与清除定时器
在js中我们很多时候都需要用到定时器,有以下两种方法 1.setInterval(函数名,时间间隔) 按照指定的周期(以毫秒计)来调用函数或计算表达式. <!DOCTYPE html> & ...
- JS定时器和清除定时器/JS四
1.永久定时 使用格式如下: timer =window.setInterval(function(){ 每隔多长时间执行的代码 }, 1000) 1000代表的是1000毫秒,上面的代码返回的是 ...
- JS 设置定时器和清除定时器
在做项目中难免会碰到需要实时刷新,动画依次出现等等需求,这时候就需要定时器登上我们的代码舞台了,所以今天我们就先来了解一下JS定时器的设置和清除吧. 一.启用定时器 window对象提供了两个方法来实 ...
- JS设置定时器和清除定时器
最近在项目中频繁运用到js定时器,现在和大家分享一下方法.在前端开发的过程中,有些时候需要某段程序等待一段时间后再开始执行,在JavaScript中主要通过定时器实现这一类需求. JS的两种定时器 w ...
- JS的定时器和清除定时器
在我们的项目开发中,难免会需要按周期执行一些代码,这就需要定时器这个功能. 常用的定时器有2种 setTimeout(function() {}, 1000); //一秒钟以后执行一次 setInte ...
- vue设置定时器、清除定时器
1.一次性定时器setTimeout let timer = setTimeout(() => {//需要定时执行的代码console.debug("Hello World" ...
- ajax清除定时器,AngualrJs清除定时器遇到的坑
AngualrJs清除定时器遇到的坑 angualrJs清除定时器爬坑之路: 今天发现一个奇怪问题,放在自定义指令里边的定时器竟然在页面跳转之后,在另一个页面这个循环定时器还在执行,这肯定是不行的,会 ...
最新文章
- Matlab与线性代数 -- 矩阵的乘法
- #软件更新#Visual Studio更新到16.3.8
- NOIP2017大爆炸
- avcodec_send_packet()函数与avcodec_receive_frame()函数
- 购买过php,【已解决】PHP项目需求:用户购买商品时,给上级发送一条通知(无限级下级会员)...
- MySQL设置表的字符编码为utf-8
- boost::math模块使用 non_finite_num facet 的一个非常简单的例子
- PHP框架的ORM思想:O类的实例化 R数据表 M映射XML
- 【渝粤题库】国家开放大学2021春3935理工英语2题目
- 【转载】Kerberos原理--经典对话
- before和after怎么区分_触发器before和after的区别
- (转)淘淘商城系列——分布式文件系统FastDFS
- stm32仿真不能设置断点_使用LiteOS Studio图形化查看LiteOS在STM32上运行的奥秘
- 执行环境,作用域链,闭包
- Android 缓存的使用
- paip.myeclipse7 java webservice 最佳实践o228
- 关于excel表格直接引用和间接引用
- Unity 2018升级2020后XR报错error CS0619: ‘XRDevice.isPresent‘ is obsolete
- (毕业设计资料)基于单片机汽车自动照明灯超远近光灯设计
- c语言一维数组教学设计,C语言教学中一维数组教学设计.doc