setTimeout()和setInterval()小结
写在前面：在写H5游戏时经常需要使用定时刷新页面实现动画效果，比较常用即setTimeout()以及setInterval()
setTimeout
描述
setTimeout(code,millisec)
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
注：调用过程中，可以使用clearTimeout(id_of_settimeout)终止
| 参数 | 描述 |
|---|---|
| code | 必需，要调用的函数后要执行的 JavaScript 代码串。 |
| millisec | 必需，在执行代码前需等待的毫秒数。 |
实现刷新
setTimeout()用于延时调用指定函数，可以通过在函数中递归调用自身，实现反复调用。
<!-- setTimeout递归调用实现计时器效果： -->
<html>
<head>
<script type="text/javascript">
var t=0;
function timer(){
document.getElementById("txt").value=t;
t++;
setTimeout("timer()",1000);
}
</script>
</head>
<body>
<p>setTimeout实现计时器效果</p>
<input type="text"id="txt">
<script>
timer();
</script>
</body>
</html>
clearTimeout
clearTimeout(id_of_settimeout)
| 参数 | 描述 |
|---|---|
| id_of_settimeout | 由 setTimeout() 返回的 ID 值。 |
<!-- 调用clearTimeout()终止setTimeout() -->
<html>
<head>
<script type="text/javascript">
var t=0;
var flag;
function timer(){
document.getElementById("txt").value=t;
t++;
flag=setTimeout("timer()",1000);
}
function stop(){
clearTimeout(flag);
}
</script>
</head>
<body>
<p>setInterval实现计时器效果</p>
<input type="text"id="txt">
<input type="button" value="Stop" onclick="stop()">
<script>
timer();
</script>
</body>
</html>
setTimeinterval
setInterval(code,millisec[,"lang"])
| 参数 | 描述 |
|---|---|
| code | 必需，要调用的函数或要执行的代码串。 |
| millisec | 必需，周期性执行或调用code之间的时间间隔，以毫秒计。 |
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
<html>
<head>
<script type="text/javascript">
var t=0;
function timer(){
document.getElementById("txt").value=t;
t++;
}
</script>
</head>
<body>
<p>setInterval实现计时器效果</p>
<input type="text"id="txt">
<script type="text/javascript">
setInterval("timer()",1000);
</script>
</body>
</html>
clearInterval
clearInterval(id_of_setinterval)
| 参数 | 描述 |
|---|---|
| id_of_setinterval | 由setInterval()返回的ID值 |
<!-- 调用clearInterval()终止setInterval() -->
<html>
<head>
<script type="text/javascript">
var t=0;
var flag;
function timer(){
document.getElementById("txt").value=t;
t++;
}
</script>
</head>
<body>
<p>setInterval实现计时器效果</p>
<input type="text"id="txt">
<script type="text/javascript">
flag=setInterval("timer()",1000);
</script>
<button onclick="window.clearInterval(flag)">Stop</button>
</body>
</html>
总结
两种方式，延时调用与周期调用，调用频率达到要求时(人眼无法识别超过30帧的动画，即刷新间隔时间应小于30.3ms)，可在视觉上形成动画效果。但是现在写动画不再局限于这两个函数，有CSS3以及性能更优质的requestAnimationFrame()可以用。
*参考：
https://developer.mozilla.org/zh-CN/
http://www.w3school.com.cn
*
setTimeout()和setInterval()小结的更多相关文章
- 深入理解定时器系列第一篇——理解setTimeout和setInterval
× 目录 [1]setTimeout [2]setInterval [3]运行机制[4]作用[5]应用 前面的话 很长时间以来,定时器一直是javascript动画的核心技术.但是,关于定时器,人们通 ...
- 前端开发：setTimeout与setInterval 定时器与异步循环数组
前端开发:setTimeout与setInterval 定时器与异步循环数组 前言: 开通博客园三个月以来,随笔记录了工作中遇到的大大小小的难题,也看过无数篇令人启发的文章,我觉得这样的环境是极好的, ...
- setTimeout和setInterval从入门到精通
我们在日常web前端开发中,经常需要用到定时器方法. 前端中的定时器方法是浏览器提供的,并不是ECMAScript规范中的.是window对象的方法. 浏览器中的定时器有两种, 一种是每间隔一定时间执 ...
- setTimeout和setInterval定时器使用详解测试
var len=4; while(len--){ var time=setTimeout(function(){ console.log(len); },0); console.log(time); ...
- setTimeout，setInterval原理
function a() { setTimeout(function(){alert(1)},0); alert(2); } a(); 和其他的编程语言一样,Javascript中的函数调用也是通过堆 ...
- Javascript的setTimeOut()和setInterval()的定时器用法
Javascript用来处理延时和定时任务的setTimeOut和setInterval函数应用非常广泛,它们都用来处理延时和定时任务,比如打开网页一段时间后弹出一个登录框,页面每隔一段时间发送异步请 ...
- setTimeout和setInterval的注意事项
精准问题 setTimeout的问题在于它并不是精准的,例如使用setTimeout设定一个任务在10ms后执行,但是在9ms后,有一个任务占用了5ms的cpu时间片,再次轮到定时器执行时,时间已经过 ...
- setTimeout和setInterval的区别以及如何写出效率高的倒计时
1.setTimeout和setInterval都属于js中的定时器,可以规定延迟时间再执行某个操作,不同的是setTimeout在规定时间后执行完某个操作就停止了,而setInterval则可以一直 ...
- setTimeout()与setInterval()
一.setTimeout与setInterval的用法(http://www.css88.com/archives/5804) setTimeout是超时调用,javascript是一个单线程的解析器 ...
随机推荐
- android离线下载的相关知识
离线下载的功能点如下: 1.下载管理(开始.取消下载). 2.网络判断(Wi-Fi,3G). 3.独立进程. 4.定时和手机催醒. 5.自启动. 选择 ...
- （转）JQuery处理json与ajax返回JSON实例
son数据是一种经型的实时数据交互的数据存储方法,使用到最多的应该是ajax与json配合使用了,下面我来给大家介绍jquery处理json数据方法. 一.JSON的一些基础知识. JSON中对象通过 ...
- （四）JS学习笔记 - 模式 - 观察者模式
理解观察者模式 简单的讲,一个对象作为特定任务或是另一对象的活动的观察者,并且在这个任务或活动发生时,利用事件的形式通知观察者. 观察者的使用场合 当一个对象的改变需要同时改变其它对象,并且它不知道具 ...
- MySQL跨表更新字段 工作记录
工作中遇到两表查询,从user表中获取用户唯一id字段 写入到另外一张qiuzu表中的uid字段中; 二者可以关联起来的只有用户的手机号码tel字段; 了解需求后数据量稍多,不可能一个一个的手动修改 ...
- Android用gif做启动页
公司的一个app的启动页想改为gif图,之前没有在android中加入过gif,所以赶紧饿补! 前言 我们都知道ImageView是不能完美加载Gif格式的图片,如果我们在ImageView中src指 ...
- struct tm->time() localtime() gmtime()
struct tm->time() localtime() gmtime() struct tm { int tm_sec; /*代表目前秒数,正常范围为0-59,但允许至61秒 */ int ...
- iOS 9的 Universal Links 通用链接使用
前段时间和朋友(@品味生活)一起搞 iOS9的通用链接,我主要做了前面官方文档翻译工作,后面的一些东西都是他在搞,整理也是他整理的. 他的博客原文地址:http://pinwei.blog.51cto ...
- contentInset，contentsize和contentOffset区别
contentInset,contentsize和contentOffset区别 今天看别人用到了contentInset,觉得很迷糊,于是gogle了一下,搜到了一篇分析的很好的文章,转在这里, ...
- IOS 解析XML文档
前段时间想找点事做,就是试着看能不能用豆瓣的API做点什么,于是就碰到了这个问题——XML解析. 老师还没讲,只能自己去查. XML文档解析主要有SAX和DOM两种模式,IOS上两种模式都可以用,这里 ...
- Ubuntu12.04 下svn服务搭建及Windows客户端tortoisesvn的使用
在Ubuntu服务端搭建apache+svn 在客户端使用Tortoisesvn工具. 第一步 安装SVN $sudo apt-get install subversion 安装成功后系统会自动建立一 ...