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 相关文章推荐
JavaScript 入门·JavaScript 具有全范围的运算符
Oct 01 Javascript
js动态为代码着色显示行号
May 29 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
Aug 21 Javascript
jquery中filter方法用法实例分析
Feb 06 Javascript
js 连续赋值的简单实现
Jun 13 Javascript
详解Angular中$cacheFactory缓存的使用
Aug 19 Javascript
超全面的vue.js使用总结
Feb 12 Javascript
vue实现商城秒杀倒计时功能
Dec 12 Javascript
JavaScript中的this原理及6种常见使用场景详解
Feb 14 Javascript
JavaScript对象字面量和构造函数原理与用法详解
Apr 18 Javascript
详解JavaScript自定义函数
Jul 29 Javascript
【js设计模式】SOLID五大设计原则
Mar 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
《一拳超人》埼玉一拳下去,他们存在了800年毫无意义!
2020/03/02 日漫
WordPress中的shortcode短代码功能使用详解
2016/05/17 PHP
laravel 自定义常量的两种方案
2019/10/14 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
在新窗口打开超链接的方法小结
2013/04/14 Javascript
关于jquery.validate1.9.0前台验证的使用介绍
2013/04/26 Javascript
js history对象简单实现返回和前进
2013/10/30 Javascript
jquery 模板的应用示例
2013/11/12 Javascript
js实现有时间限制消失的图片方法
2015/02/27 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
2015/09/15 Javascript
微信小程序  Mustache语法详细介绍
2016/10/27 Javascript
AngularJS 异步解决实现方法
2017/06/12 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
2017/08/03 Javascript
vuex的简单使用教程
2018/02/02 Javascript
element-ui使用导航栏跳转路由的用法详解
2018/08/22 Javascript
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
2018/09/04 Javascript
vue中的计算属性实例详解
2018/09/19 Javascript
vue项目上传Github预览的实现示例
2018/11/06 Javascript
vue实现的下拉框功能示例
2019/01/29 Javascript
ajaxfileupload.js实现上传文件功能
2019/04/19 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
2019/12/12 Javascript
[01:19]DOTA2城市挑战赛报名开始 开启你的城市传奇
2018/03/23 DOTA
详谈Python高阶函数与函数装饰器(推荐)
2017/09/30 Python
django rest framework 数据的查找、过滤、排序的示例
2018/06/25 Python
python模糊图片过滤的方法
2018/12/14 Python
python计算auc的方法
2020/09/09 Python
解决PyCharm无法使用lxml库的问题(图解)
2020/12/22 Python
日语求职信范文
2013/12/17 职场文书
房产委托公证书
2014/04/08 职场文书
毕业典礼演讲稿
2014/05/13 职场文书
电子专业求职信
2014/06/19 职场文书
社会体育专业大学生职业生涯规划书
2014/09/17 职场文书
如何用JS实现网页瀑布流布局
2021/04/24 Javascript
新手必备之MySQL msi版本下载安装图文详细教程
2021/05/21 MySQL
MySQL面试题讲解之如何设置Hash索引
2021/11/01 MySQL
iSCSI服务器CHAP双向认证配置
2022/04/01 Servers