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验证IP及子网掩码的合法性有效性示例
Apr 30 Javascript
基于iframe实现类似于ajax的页面无刷新
May 31 Javascript
通过JS动态创建一个html DOM元素并显示
Oct 15 Javascript
javascript实现下拉提示选择框
Dec 29 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
Jan 29 Javascript
jQuery EasyUI中DataGird动态生成列的方法
Apr 05 Javascript
Web程序员必备的7个JavaScript函数
Jun 14 Javascript
给easyui的datebox控件添加清空按钮的实现方法
Nov 09 Javascript
对于input 框限定输入值为浮点型的js代码
Sep 25 Javascript
vue2.0 实现富文本编辑器功能
May 26 Javascript
Vue多环境代理配置方法思路详解
Jun 21 Javascript
js代码实现轮播图
May 04 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生成(支持多模板)二维码海报代码
2018/04/30 PHP
javascript基础知识大集锦(二) 推荐收藏
2011/01/13 Javascript
用JS实现一个TreeMenu效果分享
2011/08/28 Javascript
js加载之使用DOM方法动态加载Javascript文件
2013/11/08 Javascript
javascript实现的多个层切换效果通用函数实例
2015/07/06 Javascript
js实现根据身份证号自动生成出生日期
2015/12/15 Javascript
浅析JavaScript作用域链、执行上下文与闭包
2016/02/01 Javascript
Bootstrap表格和栅格分页实例详解
2016/05/20 Javascript
JS中的数组方法笔记整理
2016/07/26 Javascript
js学习笔记之事件处理模型
2016/10/31 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
2018/03/15 Javascript
JS内部事件机制之单线程原理
2018/07/02 Javascript
validform表单验证的实现方法
2019/03/08 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
2019/11/24 Javascript
Python导入txt数据到mysql的方法
2015/04/08 Python
python实现颜色空间转换程序(Tkinter)
2015/12/31 Python
bat和python批量重命名文件的实现代码
2016/05/19 Python
python连接mongodb密码认证实例
2018/10/16 Python
pytorch 改变tensor尺寸的实现
2020/01/03 Python
pytorch下大型数据集(大型图片)的导入方式
2020/01/08 Python
TensorFlow实现指数衰减学习率的方法
2020/02/05 Python
Tensorflow训练MNIST手写数字识别模型
2020/02/13 Python
在pycharm创建scrapy项目的实现步骤
2020/12/01 Python
利用CSS3实现单选框动画特效示例代码
2016/09/26 HTML / CSS
美国户外生活方式品牌:Eddie Bauer
2016/12/28 全球购物
Shopee马来西亚:随拍即卖,最佳行动电商拍卖平台
2017/06/05 全球购物
新西兰便宜隐形眼镜购买网站:QUICKLENS New Zealand
2019/03/02 全球购物
仓库管理专业个人的自我评价
2013/12/30 职场文书
《再见了,亲人》教学反思
2014/02/26 职场文书
高中军训感言1000字
2014/03/01 职场文书
2014年安全生产大检查方案
2014/05/13 职场文书
设计师求职信
2014/07/01 职场文书
迁户口计划生育证明
2014/10/19 职场文书
2016最新离婚协议书范本及程序
2016/03/18 职场文书
本地通过nginx配置反向代理的全过程记录
2021/03/31 Servers
python 经纬度求两点距离、三点面积操作
2021/06/03 Python