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-Easyui 1.2 实现多层菜单效果的代码
Jan 13 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
Mar 17 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
Sep 22 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
Jan 26 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
Oct 31 Javascript
基于bootstrap实现多个下拉框同时搜索功能
Jul 19 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
Oct 24 Javascript
小程序自定义日历效果
Dec 29 Javascript
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
微信小程序页面上下滚动效果
Nov 18 Javascript
Javascript如何实现扩充基本类型
Aug 26 Javascript
我所理解的JavaScript中的this指向
Sep 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
利用discuz自带通行证整合dedecms的方法以及文件下载
2007/03/06 PHP
php 函数使用方法与函数定义方法
2010/05/09 PHP
PHP实现多进程并行操作的详解(可做守护进程)
2013/06/18 PHP
php递归删除目录下的文件但保留的实例分享
2014/05/10 PHP
Zend Framework入门教程之Zend_Config组件用法详解
2016/12/09 PHP
javascript之卸载鼠标事件的代码
2007/05/14 Javascript
批量实现面向对象的实例代码
2013/07/01 Javascript
jQuery中hover方法和toggle方法使用指南
2015/02/27 Javascript
Javascript显示和隐藏ul列表的方法
2015/07/15 Javascript
jQuery实现固定在网页顶部的菜单效果代码
2015/09/02 Javascript
理解javascript中DOM事件
2015/12/25 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
2016/06/07 Javascript
Js实现中国公民身份证号码有效性验证实例代码
2017/05/03 Javascript
详解vue-cli开发环境跨域问题解决方案
2017/06/06 Javascript
jQuery事件对象的属性和方法详解
2017/09/09 jQuery
一步步教你利用Canvas对图片进行处理
2017/09/19 Javascript
vue轮播图插件vue-awesome-swiper
2017/11/27 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
2018/04/03 Javascript
微信小程序实现人脸识别
2018/05/25 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
2019/03/29 Javascript
jQuery实现可以扩展的日历
2020/12/01 jQuery
[01:03:00]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第一局
2016/02/25 DOTA
[50:27]Secret vs VG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python中安装Scrapy模块依赖包汇总
2017/07/02 Python
Python3.5.3下配置opencv3.2.0的操作方法
2018/04/02 Python
python定义类self用法实例解析
2020/01/22 Python
python tkinter之 复选、文本、下拉的实现
2020/03/04 Python
Python定时从Mysql提取数据存入Redis的实现
2020/05/03 Python
html5标记文字_动力节点Java学院整理
2017/07/11 HTML / CSS
西班牙第一的网上药房:PromoFarma.com
2017/04/17 全球购物
中国高端家电购物商城:顺电
2018/03/04 全球购物
丝绸和人造花卉、植物和树木:Nearly Natural
2018/11/28 全球购物
揠苗助长教学反思
2014/02/04 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话全文
2014/10/25 职场文书
给校长的建议书作文500字
2015/09/14 职场文书
运动会主持人开幕词
2016/03/04 职场文书