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 相关文章推荐
求解开jscript.encode代码的asp函数
Feb 28 Javascript
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
Dec 02 Javascript
javascript小数四舍五入多种方法实现
Dec 23 Javascript
JS实现下拉框的动态添加(附效果)
Apr 03 Javascript
javascript实时显示当天日期的方法
May 20 Javascript
JS文字球状放大效果代码分享
Aug 19 Javascript
Vue父子组件之间的通信实例详解
Sep 28 Javascript
微信小程序实现蒙版弹窗效果
Nov 01 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
Dec 24 Javascript
通过cordova将vue项目打包为webapp的方法
Feb 02 Javascript
vue 导出文件,携带请求头token操作
Sep 10 Javascript
echarts饼图各个板块之间的空隙如何实现
Dec 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
php利用curl抓取新浪微博内容示例
2014/04/27 PHP
使用纯php代码实现页面伪静态的方法
2015/07/25 PHP
php实现PDO中捕获SQL语句错误的方法
2017/02/16 PHP
PHP实现的简单异常处理类示例
2017/05/04 PHP
PHP实现通过文本文件统计页面访问量功能示例
2019/02/13 PHP
PHP 构造函数和析构函数原理与用法分析
2020/04/21 PHP
Javascript miscellanea -display data real time, using window.status
2007/01/09 Javascript
js 内存释放问题
2010/04/25 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
2014/01/11 Javascript
javascript数组遍历for与for in区别详解
2014/12/04 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
2015/01/28 Javascript
jQuery实现单击和鼠标感应事件
2015/02/01 Javascript
javascript动态创建链接的方法
2015/05/13 Javascript
javascript实现显示和隐藏div方法汇总
2015/08/14 Javascript
jQuery中判断对象是否存在的方法汇总
2016/02/24 Javascript
javascript中递归的两种写法
2017/01/17 Javascript
详解angular2实现ng2-router 路由和嵌套路由
2017/03/24 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
2017/08/16 Javascript
vue判断input输入内容全是空格的方法
2018/03/02 Javascript
vue实现简单的MVVM框架
2018/08/05 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
2019/04/02 Javascript
详解Python的单元测试
2015/04/28 Python
举例详解Python中yield生成器的用法
2015/08/05 Python
Python的Django中将文件上传至七牛云存储的代码分享
2016/06/03 Python
python八大排序算法速度实例对比
2017/12/06 Python
Python编程把二叉树打印成多行代码
2018/01/04 Python
详解python使用Nginx和uWSGI来运行Python应用
2018/01/09 Python
纯CSS实现菜单、导航栏的3D翻转动画效果
2014/04/23 HTML / CSS
英国最大的LED专业零售商:Led Hut
2018/03/16 全球购物
南京迈特望C/C++面试题
2012/07/09 面试题
元旦文艺汇演主持词
2014/03/26 职场文书
三严三实对照检查材料
2014/08/25 职场文书
2014年乡镇工会工作总结
2014/12/02 职场文书
2015年业务员工作总结范文
2015/04/07 职场文书
幼儿体育课教学反思
2016/02/16 职场文书
Python实现排序方法常见的四种
2021/07/15 Python