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 相关文章推荐
javascript hashtable实现代码
Oct 13 Javascript
document.createElement()用法及注意事项(ff下不兼容)
Mar 13 Javascript
jQuery判断iframe中元素是否存在的方法
May 11 Javascript
js 调用父窗口的具体实现代码
Jul 15 Javascript
JS实现的Select三级下拉菜单代码
Aug 20 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
Apr 11 Javascript
vue.js实现价格格式化的方法
May 23 Javascript
vue使用jsonp抓取qq音乐数据的方法
Jun 21 Javascript
JavaScript实现图片轮播特效
Oct 23 Javascript
JS立即执行的匿名函数用法分析
Nov 04 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
Jul 12 Javascript
关于vue的列表图片选中打钩操作
Sep 09 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
改德生G88 - 加装等响度低音提升电路
2021/03/02 无线电
PHP多线程批量采集下载美女图片的实现代码(续)
2013/06/03 PHP
php遍历CSV类实例
2015/04/14 PHP
Javascript 类型转换方法
2010/10/24 Javascript
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
2011/10/22 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
2012/02/27 Javascript
使表格的标题列可左右拉伸jquery插件封装
2014/11/24 Javascript
JavaScript实现简单图片翻转的方法
2015/04/17 Javascript
js内置对象处理_打印学生成绩单的简单实现
2016/09/24 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
2016/10/10 Javascript
jquery点击展示与隐藏更多内容
2016/12/03 Javascript
Angular2生命周期钩子函数的详细介绍
2017/07/10 Javascript
在vue 中使用 less的教程详解
2018/09/26 Javascript
javascript中关于类型判断的一些疑惑小结
2018/10/14 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
2019/04/30 Javascript
JavaScript实现随机五位数验证码
2019/09/27 Javascript
p5.js实现简单货车运动动画
2019/10/23 Javascript
Vue搭建后台系统需要注意的问题
2019/11/08 Javascript
手把手教你实现 Promise的使用方法
2020/09/02 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS VG
2014/05/25 DOTA
[18:16]sakonoko 2017年卡尔集锦
2018/02/06 DOTA
python使用marshal模块序列化实例
2014/09/25 Python
Python使用chardet判断字符编码
2015/05/09 Python
python数据结构之链表的实例讲解
2017/07/25 Python
django上传图片并生成缩略图方法示例
2017/12/11 Python
django-rest-framework 自定义swagger过程详解
2019/07/18 Python
django框架用户权限中的session缓存到redis中的方法
2019/08/06 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
中国网上药店领导者:1药网
2017/02/16 全球购物
全球销量第一生发产品:Viviscal
2017/12/21 全球购物
天网面试题
2013/04/07 面试题
机械绘图员岗位职责
2013/11/19 职场文书
高中政治教学反思
2014/01/18 职场文书
《植物妈妈有办法》教学反思
2014/02/25 职场文书
教你用python实现12306余票查询
2021/06/30 Python
Elasticsearch 聚合查询和排序
2022/04/19 Python