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 相关文章推荐
jquery学习笔记二 实现可编辑的表格
Apr 09 Javascript
初识javascript 文档碎片
Jul 13 Javascript
javascript中in运算符用法分析
Apr 28 Javascript
js运动事件函数详解
Oct 21 Javascript
JavaScript 计算笛卡尔积实例详解
Dec 02 Javascript
node内置调试方法总结
Feb 22 Javascript
使用 vue-i18n 切换中英文效果
May 23 Javascript
Angular5集成eventbus的示例代码
Jul 19 Javascript
使用layui 渲染table数据表格的实例代码
Aug 19 Javascript
vue实现多条件和模糊搜索功能
May 28 Javascript
微信小程序商品详情页底部弹出框
Nov 22 Javascript
JS实现电脑虚拟键盘打字测试
Jun 24 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
PHP 字符截取 解决中文的截取问题,不用mb系列
2009/09/29 PHP
PHP MYSQL乱码问题,使用SET NAMES utf8校正
2009/11/30 PHP
PHP的swoole扩展安装方法详细教程
2016/05/18 PHP
CSS+JS构建的图片查看器
2006/07/22 Javascript
模拟电子签章盖章效果的jQuery插件源码
2013/06/24 Javascript
利用jquery操作Radio方法小结
2014/10/20 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
2015/02/25 Javascript
JavaScript 浏览器对象模型BOM使用介绍
2015/04/13 Javascript
学习使用AngularJS文件上传控件
2016/02/16 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
2016/05/30 Javascript
关于数据与后端进行交流匹配(点亮星星)
2016/08/03 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
2017/04/25 Javascript
浅谈Angular 中何时取消订阅
2017/11/22 Javascript
vue select组件的使用与禁用实现代码
2018/04/10 Javascript
JavaScript学习教程之cookie与webstorage
2019/06/23 Javascript
NodeJs crypto加密制作token的实现代码
2019/11/15 NodeJs
JS原型对象操作实例分析
2020/06/06 Javascript
如何基于jQuery实现五角星评分
2020/09/02 jQuery
[02:16]深扒TI7聊天轮盘语音出处2
2017/05/11 DOTA
Python中pygame的mouse鼠标事件用法实例
2015/11/11 Python
在Python中通过threading模块定义和调用线程的方法
2016/07/12 Python
Python实现对象转换为xml的方法示例
2017/06/08 Python
python 中split 和 strip的实例详解
2017/07/12 Python
编写python代码实现简单抽奖器
2020/10/20 Python
HTML5 FormData 方法介绍以及实现文件上传示例
2017/09/12 HTML / CSS
html5教程画矩形代码分享
2013/12/04 HTML / CSS
全球领先的全景影像品牌:Insta360
2019/08/21 全球购物
小学教师的自我评价范例
2013/10/31 职场文书
初中国旗下的演讲稿
2014/08/28 职场文书
流动人口婚育证明范本
2014/09/26 职场文书
唐山大地震观后感
2015/06/05 职场文书
医学生自荐信范文(2016精选篇)
2016/01/28 职场文书
教你用python实现一个无界面的小型图书管理系统
2021/05/21 Python
Mysql事务索引知识汇总
2022/03/17 MySQL
如何解决goland,idea全局搜索快捷键失效问题
2022/04/03 Golang
详细介绍python操作RabbitMq
2022/04/12 Python