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 相关文章推荐
Jquery 组合form元素为json格式,asp.net反序列化
Jul 09 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
Jan 02 Javascript
使用jQuery设置disabled属性与移除disabled属性
Aug 21 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
Dec 29 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
Dec 02 Javascript
bootstrap模态框远程示例代码分享
May 22 Javascript
phantomjs导出html到pdf的方法总结
Oct 19 Javascript
vue双向数据绑定知识点总结
Apr 18 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
Sep 07 Javascript
javascript解析json格式的数据方法详解
Aug 07 Javascript
在elementui中Notification组件添加点击事件实例
Nov 11 Javascript
原生js实现表格循环滚动
Nov 24 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
php smarty函数扩展
2010/03/15 PHP
获取HTML DOM节点元素的方法的总结
2009/08/21 Javascript
JS判断是否为数字,是否为整数,是否为浮点数的代码
2010/04/24 Javascript
javascript (用setTimeout而非setInterval)
2011/12/28 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
2015/12/09 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
2016/01/04 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
2016/09/25 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
2016/12/05 Javascript
Node.js笔记之process模块解读
2018/05/31 Javascript
在VUE中实现文件下载并判断状态的方法
2019/11/08 Javascript
js实现上传图片并显示图片名称
2019/12/18 Javascript
python实现图片变亮或者变暗的方法
2015/06/01 Python
Python 正则表达式的高级用法
2016/12/04 Python
Python基础练习之用户登录实现代码分享
2017/11/08 Python
一道python走迷宫算法题
2018/01/22 Python
Python代码块批量添加Tab缩进的方法
2018/06/25 Python
Pycharm无法使用已经安装Selenium的解决方法
2018/10/13 Python
对python判断ip是否可达的实例详解
2019/01/31 Python
Python requests模块实例用法
2019/02/11 Python
python 随机生成10位数密码的实现代码
2019/06/27 Python
Python递归实现打印多重列表代码
2020/02/27 Python
Python内存映射文件读写方式
2020/04/24 Python
Python内置异常类型全面汇总
2020/05/28 Python
python3中数组逆序输出方法
2020/12/01 Python
新西兰最大的连锁超市:Countdown
2020/06/04 全球购物
文明学生标兵事迹
2014/01/21 职场文书
广告学毕业生求职信
2014/01/30 职场文书
小学生家长评语大全
2014/02/10 职场文书
人力资源总监工作说明
2014/03/03 职场文书
副总经理岗位职责
2014/03/16 职场文书
元旦趣味活动方案
2014/08/22 职场文书
推销搭讪开场白
2015/05/28 职场文书
安全教育日主题班会
2015/08/13 职场文书
给校长的建议书作文500字
2015/09/14 职场文书
详解Java实现数据结构之并查集
2021/06/23 Java/Android
拙作再改《我的收音机情缘》
2022/04/05 无线电