Jquery中使用setInterval和setTimeout的方法


Posted in Javascript onApril 08, 2013

方法1. 应用jQuery的扩展可以解决这个问题。

$(document).ready(function(){
$.extend({
  show:function(){
   alert("ready");
  }
});
setInterval("show()",3000);
});

方法2. 指定定时执行的函数时不要使用引号和括号。

$(function(){
function show(){
   alert("ready");
}
setInterval(show,3000);// 注意函数名没有引号和括弧! 
// 使用setInterval("show()",3000);会报“缺少对象” 
});

区别:

setTimeout()

从载入后延迟指定的时间去执行一个表达式或者是函数;
      仅执行一次 ;和window.clearTimeout一起使用.

setInterval()

在执行时,它从载入页面后每隔指定的时间执行 一个表达式或者是函数;(功能类似于递归函数);和window.clearInterval一起使用.

补充说明:

这两个方法都可以用来实现在一个固定 时间段之后去执行JavaScript。不过两者各有各的应用场景。

方 法

实际上,setTimeout和 setInterval的语法相同。它们都有两个参数,一个是将要执行的代码字符串,还有一个是 以毫秒为单位的时间间隔,当过了那个时间段之后就将执行那段代码。

不过这两个函数还是有区别的, setInterval在执行完一次代码之后,经过了那个固定的时间间隔,它还会自动重复执行代 码,而setTimeout只执行一次那段代码。

虽然表面上看来setTimeout只能应用在on-off方式的动作上,不过可以通 过创建一个函数循环重复调用setTimeout,以实现重复的操作:

showTime();
function showTime()
{
    var today = new Date();
    alert("The time is: " + today.toString ());
    setTimeout("showTime()", 5000);
}

一旦调 用了这个函数,那么就会每隔5秒钟就显示一次时间。如果使用setInterval,则相应的代码如下所示:

setInterval ("showTime()", 5000);
function showTime()
{
    var today = new Date();
    alert("The time is: " + today.toString ());
}

这两种方法可能看起来非常像,而且显 示的结果也会很相似,不过两者的最大区别就是,setTimeout方法不会每隔5秒钟就执行一 次showTime函数,它是在每次调用setTimeout后过5秒钟再去执行showTime函数。这意味着 如果showTime函数的主体部分需要2秒钟执行完,那么整个函数则要每7秒钟才执行一次。 而setInterval却没有被自己所调用的函数所束缚,它只是简单地每隔一定时间就重复执行 一次那个函数。

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

Javascript 相关文章推荐
js实现杯子倒水问题自动求解程序
Mar 25 Javascript
使用js实现一个可编辑的select下拉列表
Feb 20 Javascript
jQuery中append()方法用法实例
Dec 25 Javascript
JavaScript计划任务后台运行的方法
Dec 18 Javascript
js实现图片上传并正常显示
Dec 19 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
Oct 25 Javascript
JS实现动画兼容性的transition和transform实例分析
Dec 13 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
Dec 21 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
Jan 04 Javascript
Js实现中国公民身份证号码有效性验证实例代码
May 03 Javascript
为vue项目自动设置请求状态的配置方法
Jun 09 Javascript
js微信分享接口调用详解
Jul 23 Javascript
JQueryEasyUI datagrid框架的进阶使用
Apr 08 #Javascript
基于datagrid框架的查询
Apr 08 #Javascript
datagrid框架的删除添加与修改
Apr 08 #Javascript
jQuery中setTimeout的几种使用方法小结
Apr 07 #Javascript
jQuery setTimeout()函数使用方法
Apr 07 #Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
Apr 07 #Javascript
关于jQuery参考实例 1.0 jQuery的哲学
Apr 07 #Javascript
You might like
老照片 - 几十年前的收音机与人
2021/03/02 无线电
Php做的端口嗅探器--可以指定网站和端口
2006/10/09 PHP
关于PHP文件的自动运行方法分析
2016/05/13 PHP
yii2项目实战之restful api授权验证详解
2017/05/20 PHP
PHP检测接口Traversable用法详解
2017/12/29 PHP
超清晰的document对象详解
2007/02/27 Javascript
js 实现打印网页中定义的部分内容的代码
2010/04/01 Javascript
js完美的div拖拽实例代码
2014/01/22 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
2014/12/04 Javascript
jQuery中eq()方法用法实例
2015/01/05 Javascript
详解javascript遍历方式
2015/11/11 Javascript
js实现异步循环实现代码
2016/02/16 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
2016/04/05 Javascript
Bootstrap模仿起筷首页效果
2016/05/09 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
2016/07/27 Javascript
深入理解Nodejs Global 模块
2017/06/03 NodeJs
[05:28]刀塔密之一:团结则存
2014/07/03 DOTA
python实现DNS正向查询、反向查询的例子
2014/04/25 Python
查看TensorFlow checkpoint文件中的变量名和对应值方法
2018/06/14 Python
Django框架的使用教程路由请求响应的方法
2018/07/03 Python
django之自定义软删除Model的方法
2019/08/14 Python
简单了解Java Netty Reactor三种线程模型
2020/04/26 Python
Python 实现将某一列设置为str类型
2020/07/14 Python
Ubuntu权限不足无法创建文件夹解决方案
2020/11/14 Python
HTML5梦幻之旅——炫丽的流星雨效果实现过程
2013/08/06 HTML / CSS
英国奢侈品网站:MatchesFashion
2016/12/16 全球购物
荷兰牛仔裤网上商店:Jeans Centre
2018/04/03 全球购物
Java基础面试题
2012/11/02 面试题
国际金融专业大学生职业生涯规划书
2013/12/28 职场文书
市场营销职业生涯规划书范文
2014/01/12 职场文书
幼儿园教师个人反思
2014/01/30 职场文书
运动会方阵解说词
2014/02/12 职场文书
公证书样本
2014/04/10 职场文书
2015少先队大队辅导员工作总结
2015/07/24 职场文书
Python答题卡识别并给出分数的实现代码
2021/06/22 Python
VW、VH适配移动端的解决方案与常见问题
2023/05/21 HTML / CSS