写在前面：在写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()小结的更多相关文章

  1. 深入理解定时器系列第一篇——理解setTimeout和setInterval

    × 目录 [1]setTimeout [2]setInterval [3]运行机制[4]作用[5]应用 前面的话 很长时间以来,定时器一直是javascript动画的核心技术.但是,关于定时器,人们通 ...

  2. 前端开发：setTimeout与setInterval 定时器与异步循环数组

    前端开发:setTimeout与setInterval 定时器与异步循环数组 前言: 开通博客园三个月以来,随笔记录了工作中遇到的大大小小的难题,也看过无数篇令人启发的文章,我觉得这样的环境是极好的, ...

  3. setTimeout和setInterval从入门到精通

    我们在日常web前端开发中,经常需要用到定时器方法. 前端中的定时器方法是浏览器提供的,并不是ECMAScript规范中的.是window对象的方法. 浏览器中的定时器有两种, 一种是每间隔一定时间执 ...

  4. setTimeout和setInterval定时器使用详解测试

    var len=4; while(len--){ var time=setTimeout(function(){ console.log(len); },0); console.log(time); ...

  5. setTimeout，setInterval原理

    function a() { setTimeout(function(){alert(1)},0); alert(2); } a(); 和其他的编程语言一样,Javascript中的函数调用也是通过堆 ...

  6. Javascript的setTimeOut()和setInterval()的定时器用法

    Javascript用来处理延时和定时任务的setTimeOut和setInterval函数应用非常广泛,它们都用来处理延时和定时任务,比如打开网页一段时间后弹出一个登录框,页面每隔一段时间发送异步请 ...

  7. setTimeout和setInterval的注意事项

    精准问题 setTimeout的问题在于它并不是精准的,例如使用setTimeout设定一个任务在10ms后执行,但是在9ms后,有一个任务占用了5ms的cpu时间片,再次轮到定时器执行时,时间已经过 ...

  8. setTimeout和setInterval的区别以及如何写出效率高的倒计时

    1.setTimeout和setInterval都属于js中的定时器,可以规定延迟时间再执行某个操作,不同的是setTimeout在规定时间后执行完某个操作就停止了,而setInterval则可以一直 ...

  9. setTimeout()与setInterval()

    一.setTimeout与setInterval的用法(http://www.css88.com/archives/5804) setTimeout是超时调用,javascript是一个单线程的解析器 ...

随机推荐

  1. Tabs( 选项卡)

    一． 加载方式 //class 加载方式<div id="box" class="easyui-tabs" style="width:500px ...

  2. C#。4.1数组的应用

    数组的应用 (一).冒泡排序.1.冒泡排序是用双层循环解决.外层循环的是趟数,里层循环的是次数.2.趟数=n-1:次数=n-趟数.3.里层循环使用if比较相临的两个数的大小,进行数值交换. 代码 in ...

  3. C#。3 循环

    循环:可以反复执行某段代码,直到不满足循环条件为止. 一.循环的四要素:初始条件.循环条件.状态改变.循环体. 1.初始条件:循环最开始的状态. 2.循环条件:在什么条件下进行循环,不满足此条件,则循 ...

  4. jquery获取checkbox被选中的值

    只用一个循环,就可以找出被选中的checkbox的值 var s; $("[name = b]:checkbox").each(function () {              ...

  5. 你好，C++（18） 到底要不要买这个西瓜？4.1.6 操作符之间的优先顺序

    4.1.6 操作符之间的优先顺序 在表达一些比较复杂的条件判断时,在同一个表达式中,有时可能会存在多个操作符.比如,我们在判断要不要买某个西瓜时,不仅要判断它的总价(单价8.2元/斤,一共10.3斤) ...

  6. uva 105 - The Skyline Problem

    一.用数组储存该位置的最高点即可(图形的连续点离散化),注意左边界及右边界的情况: 注意:无论建筑物最左边是盖到哪里,你都得从1开始输出(输入输出都是integer,所以才能离散化): #includ ...

  7. 如何使用JSONP

    1.使用$.getJSON() $.getJSON(" http://跨域的dns/document!searchJSONResult.action?name1="+value1+ ...

  8. DEDE栏目内容调用

    {dede:sql sql='Select content from dede_arctype where id=1'} [field:content/] {/dede:sql},

  9. Linux下*.tar.gz文件解压缩命令 find 命令

    1.压缩命令: 命令格式:tar  -zcvf   压缩文件名.tar.gz   被压缩文件名 可先切换到当前目录下.压缩文件名和被压缩文件名都可加入路径. 2.解压缩命令: 命令格式:tar  -z ...

  10. Python新手学习基础之函数-关键字参数

    关键字参数 函数也可以使用 键 =值 的关键字参数形式被调用,这种调用形式的参数被称为关键字参数. 特别是在一个有许多参数的函数下,你想要指定参数中的部分参数,你可以使用关键字参数的方式来调用函数. ...