js中的setInterval和setTimeout使用实例


Posted in Javascript onMay 09, 2014

setInterval() 定义和用法

setInterval() 方法可按照指定的周期(以毫秒计)来执行函数或表达式。该方法会不停地循环调用函数,直到使用 clearInterval() 明确停止该函数或窗口被关闭。clearInterval() 函数的参数即 setInterval() 返回的 ID 值。

语法

setInterval(code,millisec[,"lang"])
code 必需。要调用的函数或要执行的代码串。
millisec 必须。周期性执行或调用 code 之间的时间间隔,以毫秒计。

返回值

一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

使用示例:

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body>
<input type="text" id="clock" size="35" />
<script language=javascript>
var int=setInterval("clock()",50);
function clock(){
 var t=new Date();
 document.getElementById("clock").value=t;
}
</script>
</form>
<button onclick="window.clearInterval(int)">
停止 interval 事件</button>
</body>
</html>

setTimeout() 定义和用法

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,该方法与 setInterval() 方法不同的是该方法只执行一次。

语法

setTimeout(code,millisec)
code 必需。要调用的函数后要执行的 JavaScript 代码串。
millisec 必需。在执行代码前需等待的毫秒数,以毫秒计。

提示:
(1)setTimeout() 虽然是只执行一次代码。但如果许要多次调用,除了使用 setInterval() 外还可以让被执行的代码里面自身再次调用 setTimeout() 方法已达到多次执行的目的。
(2)另外setTimeout()方法也同样可以返回一个ID值,以方便使用clearInterval()方法对使用setTimeout()方法的取消。

使用示例:

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<script type="text/javascript">
function timedMsg(){
 var t=setTimeout("alert('3 秒时间到!')",3000);
}
function timedMsgAways(){
 alert('3 秒时间到!');
 var t=setTimeout("timedMsgAways()",3000);
}
</script>
</head>
<body>
<form>
<input type="button" value="3 秒后警告" onClick="timedMsg()"><br />
<input type="button" value="循环 3 秒警告" onClick="timedMsgAways()">
</form>
</body>
</html>

对于这两个方法,需要注意的是如果要求在每隔一个固定的时间间隔后就精确地执行某动作,那么最好使用setInterval,而如果不想由于连续调用产生互相干扰的问题,尤其是每次函数的调用需要繁重的计算以及很长的处理时间,那么最好使用setTimeout。

Javascript 相关文章推荐
XHTML-Strict 内允许出现的标签
Dec 11 Javascript
jquery 得到当前页面高度和宽度的两个函数
Feb 21 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
Apr 14 Javascript
Javascript处理DOM元素事件实现代码
May 23 Javascript
JavaScript匿名函数用法分析
Feb 13 Javascript
jQuery中$.extend()用法实例
Jun 24 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
Sep 25 Javascript
详解node.js搭建代理服务器请求数据
Apr 08 Javascript
JS组件系列之JS组件封装过程详解
Apr 28 Javascript
javascript移动端 电子书 翻页效果实现代码
Sep 07 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
Aug 31 Javascript
36个正则表达式(开发效率提高80%)
Nov 17 Javascript
js获取 type=radio 值的方法
May 09 #Javascript
js实现的点击数量加一可操作数据库
May 09 #Javascript
jQuery照片伸缩效果不影响其他元素的布局
May 09 #Javascript
js四舍五入数学函数round使用实例
May 09 #Javascript
JavaScript实现的购物车效果可以运用在好多地方
May 09 #Javascript
关于Javascript 对象(object)的prototype
May 09 #Javascript
javascript字母大小写转换的4个函数详解
May 09 #Javascript
You might like
解析csv数据导入mysql的方法
2013/07/01 PHP
手把手编写PHP框架 深入了解MVC运行流程
2016/09/19 PHP
Laravel 自动生成验证的实例讲解:login / logout
2019/10/14 PHP
Javascript的IE和Firefox兼容性汇编
2006/07/01 Javascript
当jQuery遭遇CoffeeScript的时候 使用分享
2011/09/17 Javascript
JS冒泡事件的快速解决方法
2013/12/16 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/07/18 Javascript
javascript 获取函数形参个数
2014/07/31 Javascript
JavaScript实现大数的运算
2014/11/24 Javascript
Javascript类型转换的规则实例解析
2016/02/23 Javascript
js实现页面刷新滚动条位置不变
2016/11/27 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
2017/07/16 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
2017/12/14 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
2018/07/03 jQuery
小程序实现展开/收起的效果示例
2018/09/22 Javascript
jQuery事件多次绑定与解绑问题实例分析
2019/02/19 jQuery
ES6知识点整理之函数数组参数的默认值及其解构应用示例
2019/04/17 Javascript
bootstrap Table实现合并相同行
2019/07/19 Javascript
React 父子组件通信的实现方法
2019/12/05 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
2020/08/06 Javascript
Python socket套接字实现C/S模式远程命令执行功能案例
2018/07/06 Python
Python中利用aiohttp制作异步爬虫及简单应用
2018/11/29 Python
python把转列表为集合的方法
2019/06/28 Python
Django对数据库进行添加与更新的例子
2019/07/12 Python
Python高级特性 切片 迭代解析
2019/08/23 Python
基于Python中isfile函数和isdir函数使用详解
2019/11/29 Python
Python利用Scrapy框架爬取豆瓣电影示例
2020/01/17 Python
pip已经安装好第三方库但pycharm中import时还是标红的解决方案
2020/10/09 Python
详解CSS3中使用gradient实现渐变效果的方法
2015/08/18 HTML / CSS
如何使用html5与css3完成google涂鸦动画
2012/12/16 HTML / CSS
Under Armour安德玛法国官网:美国高端运动科技品牌
2018/06/29 全球购物
Dockers鞋官网:Dockers Shoes
2018/11/13 全球购物
中软国际Java程序员机试题
2012/08/19 面试题
大二法学专业职业生涯规划范文
2014/02/12 职场文书
《母亲的恩情》教学反思
2014/02/13 职场文书
Python中Schedule模块使用详解 周期任务神器
2022/04/19 Python