jQuery setTimeout()函数使用方法


Posted in Javascript onApril 07, 2013

setTimeout()
从载入后延迟指定的时间去执行一个表达式或者是函数;
仅执行一次 ;和window.clearTimeout一起使用.

我在

$(document).ready(function(){
setTimout(test(),200); 
function test() 
{ 
alert(1); 
} 
});

只会执行一次,有朋友说可以使用

setInterval ("showTime()", 5000);
function showTime()
{
    var today = new Date();
    alert("The time is: " + today.toString ());
}

但我调用下面方法也可以和setInterval一样哦

<div id="div_debug"></div>
<script language="JavaScript">
//显示
function log(s){
    $('#div_debug').append(s+'<br>');
}
//以下是 setTimeout 在 jQuery 中的用法
function funA(){
    log('funA...');
    setTimeout('funA()', 1000);
}
jQuery(document).ready(function($){
    //用法1 : 把要调用的函数写在ready外面,使它成为全局函数
    funA();
    //用法2 : 直接写函数名,不能带括号也不能带引号,适合没有参数的函数
    function funB(){
        log('funB...');
        setTimeout(funB, 1000);
    }
    funB();
    //用法3 : 通过调用匿名函数来执行,适合有带参数的函数
    function funC(v){
        log('funC...'+v);
        setTimeout(function(){funC(v+1)}, 1000);
    }
    funC(1);
    //用法4 : 通过在jQuery命名空间上增加函数,调用起来更方便
    $.extend({
        funD:function(v){
            log('funD...'+v);
            setTimeout("$.funD("+(v+1)+")",1000);
        }
    });
    $.funD(101);
});
</script>

jQuery中setTimeout的几种使用方法

jQuery 中 setTimeout/setInterval 不能像在原生态 javascript 中那样使用, 否则会报错.

我们通过例子来说明一下jQuery中setTimeout的几种使用方法, 首先准备好测试用的DIV和公共函数:

<div id="div_debug"></div> 
<script src="http://www.studyday.net/demo/jquery.js"></script> 
<script language="JavaScript"> 
functionlog(s){ 
$('#div_debug').append(s+'<br>'); 
} //下文中测试用的代码可以放在这一行注释的下面,替换掉 //... 
//... 
</script>

原生态 javascript 中的 setTimeout 基本用法是像这样子的.
//原生态 javascript 中的 setTimeout 基本用法 
functionfunA(){ 
log('funA...'); 
setTimeout('funA()', 1000); 
} 
funA();

下面是jQuery中setTimeout的几种使用方法. 在线实例

//jQuery 中的用法 
functionfunA(){ 
log('funA...'); 
setTimeout('funA()', 1000); 
} jQuery(document).ready(function($){ 
//用法1 : 把要调用的函数写在ready外面,使它成为全局函数 
funA(); 
//用法2 : 直接写函数名,不能带括号也不能带引号,适合没有参数的函数 
functionfunB(){ 
log('funB...'); 
setTimeout(funB, 1000); 
} 
funB(); 
//用法3 : 通过调用匿名函数来执行,适合有带参数的函数 
functionfunC(v){ 
log('funC...'+v); 
setTimeout(function(){funC(v+1)}, 1000); 
} 
funC(1); 
//用法4 : 通过在jQuery命名空间上增加函数,适用面更广 
$.extend({ 
funD:function(v){ 
log('funD...'+v); 
setTimeout("$.funD("+(v+1)+")",1000); 
} 
}); 
$.funD(100); 
});

用法2和用法3的区别很明显, 但用法3和用法4的区别在哪里呢?为什么说用法4比用法3适用面更广呢?通过下面这个例子可以很直观的明白二者的区别:

jQuery(document).ready(function($){ 
//用法3 : 通过调用匿名函数来执行,适合有带参数的函数 
functionfunC(v){ 
log('funC...'+v); 
setTimeout(function(){funC(v+1)}, 1000); 
} //用法4 : 通过在jQuery命名空间上增加函数,调用起来更方便 
$.extend({ 
funD:function(v){ 
log('funD...'+v); 
setTimeout("$.funD("+(v+1)+")",1000); 
} 
}); 
}); 
jQuery(document).ready(function($){ 
//funC(1); //去掉注释后执行这一句时会报错 
$.funD(100); //这一句是正常的, 明白两者之间的区别了吧 
});
Javascript 相关文章推荐
如何在Mozilla Gecko 用Javascript加载XSL
Jan 09 Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
Feb 10 Javascript
Javascript 计算字符串在localStorage中所占字节数
Oct 21 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
Nov 25 Javascript
深入探讨前端框架react
Dec 09 Javascript
详解js跨域原理以及2种解决方案
Dec 09 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
Dec 10 Javascript
js实现文字超出部分用省略号代替实例代码
Sep 01 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
Sep 28 Javascript
JavaScript 有用的代码片段和 trick
Feb 22 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
Jun 25 Javascript
js神秘的电报密码 哈弗曼编码实现
Sep 10 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
Apr 07 #Javascript
关于jQuery参考实例 1.0 jQuery的哲学
Apr 07 #Javascript
jQuery操作checkbox选择(list/table)
Apr 07 #Javascript
关于jQuery参考实例2.0 用jQuery选择元素
Apr 07 #Javascript
js将long日期格式转换为标准日期格式实现思路
Apr 07 #Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
Apr 07 #Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
Apr 07 #Javascript
You might like
150kHz到30Mhz完全冲浪手册
2020/03/20 无线电
二十行语句实现从Excel到mysql的转化
2006/10/09 PHP
IIS下PHP连接数据库提示mysql undefined function mysql_connect()
2010/06/04 PHP
php通过淘宝API查询IP地址归属等信息
2015/12/25 PHP
Yii+upload实现AJAX上传图片的方法
2016/07/13 PHP
Thinkphp 框架扩展之类库扩展操作详解
2020/04/23 PHP
window.open()弹出居中的窗口
2007/02/01 Javascript
js资料toString 方法
2007/03/13 Javascript
使用正则替换变量
2007/05/05 Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
2013/04/23 Javascript
js调试系列 控制台命令行API使用方法
2014/06/18 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
2014/10/17 Javascript
Jquery解析Json格式数据过程代码
2014/10/17 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
2016/02/04 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
2016/03/25 Javascript
js实现九宫格的随机颜色跳转
2017/02/19 Javascript
js实现HTML中Select二级联动的实例
2018/01/05 Javascript
js构建二叉树进行数值数组的去重与优化详解
2018/03/26 Javascript
JS 数组随机洗牌的实例代码
2018/09/12 Javascript
webpack实现一个行内样式px转vw的loader示例
2018/09/13 Javascript
[01:00:04]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第二局
2016/02/26 DOTA
Python struct.unpack
2008/09/06 Python
用Python制作检测Linux运行信息的工具的教程
2015/04/01 Python
利用Python爬虫给孩子起个好名字
2017/02/14 Python
利用Pycharm断点调试Python程序的方法
2018/11/29 Python
解决python 未发现数据源名称并且未指定默认驱动程序的问题
2018/12/07 Python
python类的实例化问题解决
2019/08/31 Python
Python函数参数定义及传递方式解析
2020/06/10 Python
CSS3 实现童年的纸飞机
2019/05/05 HTML / CSS
匡威英国官网:Converse英国
2018/12/02 全球购物
四川成都导游欢迎词
2014/01/18 职场文书
英文商务邀请信
2014/01/22 职场文书
小学生中国梦演讲稿
2014/04/23 职场文书
学习退步检讨书
2014/09/28 职场文书
看雷锋电影观后感
2015/06/10 职场文书
党章党规党纪学习心得体会
2016/01/14 职场文书