H5案例分享:JS设置定时器和清除定时器

2017-05-19 H5案例分享 H5案例分享

 

JS设置定时器和清除定时器

   在做项目中难免会碰到需要实时刷新,动画依次出现等等需求,这时候就需要定时器登上我们的代码舞台了,所以今天我们就先来了解一下JS定时器的设置和清除吧。

 

  • 一、启用定时器

   window对象提供了两个方法来实现定时器的效果,分别是window.setTimeout()和window.setInterval。其中前者可以使一段代码在指定时间后运行;而后者则可以使一段代码每过指定时间就运行一次。它们的原型如下:

   window.setTimeout(code,millisec);

   window.setInterval(code,millisec);

   其中,code可以是用引号括起来的一段代码,也可以是一个函数名,到了指定的时间,系统便会自动调用该函数,当使用函数名作为调用句柄时,不能带有任何参数;而使用字符串时,则可以在其中写入要传递的参数。两个方法中的第二个参数是millisec,表示延时或者重复执行的毫秒数

 

具体写法如下

  1. 函数名,不带参数

setTimeout (test,1000);           //1秒后执行

 

  1. 字符串,可以执行的代码

setTimeout ('test()',1000);       //1秒后执行

 

  1. 匿名函数

setTimeout (function(){},1000);   //1秒后执行

注:setInterval的用法与setTimeout一样

 

  1. 调用函数,带参数

setTimeout ('test(参数)',1000);      //1秒后执行

注:如果不小心写成了setTimeout (test(参数),1000);test方法就会立即执行哦。

 

DEMO代码:

 

执行结果:

 

二、清除定时器

   由于定时器在调用时,都会返回一个整形的数字,该数字代表定时器的序号,即第多少个定时器,所以定时器的清除要借助于这个返回的数字。

   定时器清除的方法:clearTimeout(obj)和clearInterval(obj)。

   要清除定时器,就必须在用定时器的时候,定义一个变量来记录定时器的返回值。如下:

//setTimeout 1000ms后执行1次
var test1 = setTimeout(function(){
    //your codes
},1000);
 
//setInterval 每隔1000ms执行一次
var test2 = setInterval(function(){
   //your codes
},1000)
 
//清除Timeout的定时器,传入变量名(创建Timeout定时器时定义的变量名)
clearTimeout(test1);
 
//清除Interval的定时器,传入变量名(创建Interval定时器时定义的变量名)
clearInterval(test2);

 

   注:有时候在写的时候,还会习惯将清空的定时器的变量置空,这样写既可以释放内存,也可以便于后边代码的判断。

 

   好啦,今天的轻知识就分享到这里了,我们下期再见~

 

 


以上为“H5案例分享”团队原创文章,转载请注明出处!

标签

分享:
海报
案列链接
下载截图
收藏案例
已收藏
分享到微信朋友圈
打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。

相关推荐:

H5案例分享:Gulp系列之压缩JS

H5案例分享:Gulp系列之图片压缩

10个案例了解H5之图片合成

关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~


微信扫一扫
关注该公众号

收藏

微信极速登录/注册

对汉语支持不错,别对小五说英文

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~