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实现搜索框提示功能示例代码
Aug 13 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
Oct 24 Javascript
js中apply方法的使用详细解析
Nov 04 Javascript
jQuery实现的多屏图像图层切换效果实例
May 07 Javascript
深入浅析JavaScript的API设计原则
Jun 14 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
Jul 07 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
Apr 23 Javascript
JavaScript使用Ajax上传文件的示例代码
Aug 10 Javascript
vue组件详解之使用slot分发内容
Apr 09 Javascript
基于webpack4搭建的react项目框架的方法
Jun 30 Javascript
详解React中合并单元格的正确写法
Jan 08 Javascript
vue-devtools的安装和使用步骤详解
Oct 17 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
重新封装zend_soap实现http连接安全认证的php代码
2011/01/12 PHP
简单说说PHP优化那些事(经验分享)
2014/11/27 PHP
php实现按照权重随机排序数据的方法
2015/01/09 PHP
修改PHP脚本使WordPress拦截垃圾评论的方法示例
2015/12/10 PHP
PHP实现的微信公众号扫码模拟登录功能示例
2019/05/30 PHP
Javascript中的数学函数
2007/04/04 Javascript
JavaScript 页面编码与浏览器类型判断代码
2010/06/03 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
2013/04/12 Javascript
复选框全选与全不选操作实现思路
2013/08/18 Javascript
jQuery表格插件ParamQuery简单使用方法示例
2013/12/05 Javascript
js中settimeout方法加参数
2014/02/28 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
jquery获取文档高度和窗口高度汇总
2016/01/25 Javascript
jQuery的ajax下载blob文件
2016/07/21 Javascript
微信小程序 setData使用方法及常用错误解决办法
2017/05/11 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
2017/11/10 jQuery
js时间戳与日期格式之间转换详解
2017/12/11 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
2017/12/18 jQuery
微信小程序 组件的外部样式externalClasses使用详解
2019/09/06 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
2019/11/04 Javascript
原生js实现轮播图特效
2020/05/04 Javascript
对vue生命周期的深入理解
2020/12/03 Vue.js
JS+JQuery实现无缝连接轮播图
2020/12/30 jQuery
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
python中base64加密解密方法实例分析
2015/05/16 Python
Python的Flask框架中使用Flask-SQLAlchemy管理数据库的教程
2016/06/14 Python
python基础教程之Filter使用方法
2017/01/17 Python
Ubuntu下Python2与Python3的共存问题
2018/10/31 Python
在Python中预先初始化列表内容和长度的实现
2019/11/28 Python
python解包概念及实例
2021/02/17 Python
五十岁生日宴会答谢词
2014/01/15 职场文书
授权委托书协议书
2014/10/16 职场文书
优秀党员申报材料
2014/12/18 职场文书
python 统计代码耗时的几种方法分享
2021/04/02 Python
如何用六步教会你使用python爬虫爬取数据
2022/04/06 Python
使用Ajax实现无刷新上传文件
2022/04/12 Javascript