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 相关文章推荐
iis6+javascript Add an Extension File
Jun 13 Javascript
面向对象的编程思想在javascript中的运用上部
Nov 20 Javascript
jquery中:input和input的区别分析
Jul 13 Javascript
Node.js的包详细介绍
Jan 14 Javascript
简单理解JavaScript中的封装与继承特性
Mar 19 Javascript
Yarn的安装与使用详细介绍
Oct 25 Javascript
vue-axios使用详解
May 10 Javascript
vue.js移动端app实战1:初始配置详解
Jul 24 Javascript
微信小程序 页面滑动事件的实例详解
Oct 12 Javascript
JavaScript中Object值合并方法详解
Dec 22 Javascript
element-ui 关于获取select 的label值方法
Aug 24 Javascript
vue导航栏部分的动态渲染实例
Nov 01 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
全国FM电台频率大全 - 11 浙江省
2020/03/11 无线电
php中的数组操作函数整理
2008/08/18 PHP
php生成随机密码的几种方法
2011/01/17 PHP
PHP中将网页导出为Word文档的代码
2012/05/25 PHP
微信公众平台接口开发入门示例
2014/12/24 PHP
谈谈你对Zend SAPIs(Zend SAPI Internals)的理解
2015/11/10 PHP
Laravel中10个有用的用法小结
2019/05/06 PHP
WordPress免插件实现面包屑导航的示例代码
2020/08/20 PHP
JS 自动安装exe程序
2008/11/30 Javascript
javascript offsetX与layerX区别
2010/03/12 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
2014/08/15 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
2015/01/28 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
2016/05/23 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
详谈angularjs中路由页面强制更新的问题
2017/04/24 Javascript
webpack external模块的具体使用
2018/03/10 Javascript
Element-UI中Upload上传文件前端缓存处理示例
2019/02/21 Javascript
详细解析Python当中的数据类型和变量
2015/04/25 Python
利用python实现简单的循环购物车功能示例代码
2017/07/05 Python
Pandas 对Dataframe结构排序的实现方法
2018/04/10 Python
python实现将读入的多维list转为一维list的方法
2018/06/28 Python
Python socket模块实现的udp通信功能示例
2019/04/10 Python
Python基础学习之时间转换函数用法详解
2019/06/18 Python
使用python的pandas为你的股票绘制趋势图
2019/06/26 Python
Django 通过JS实现ajax过程详解
2019/07/30 Python
python 计算方位角实例(根据两点的坐标计算)
2020/01/17 Python
10种CSS3实现的loading动画,挑一个走吧?
2020/11/16 HTML / CSS
阿联酋网上花店:Ferns N Petals
2018/02/14 全球购物
英国最受信任的在线眼镜商之一:Fashion Eyewear
2019/10/31 全球购物
Trip.com澳大利亚:在线旅行社
2019/12/01 全球购物
BannerBuzz加拿大:在线定制横幅印刷、广告和标志
2020/03/10 全球购物
PHP如何与mysql建立链接
2013/05/05 面试题
好人好事事迹材料
2014/02/12 职场文书
会计学自荐信
2014/06/03 职场文书
中秋节慰问信
2015/02/15 职场文书
2015年学校消防安全工作总结
2015/10/14 职场文书