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 相关文章推荐
js函数的延迟加载实现代码
Oct 11 Javascript
浅析return false的正确使用
Nov 04 Javascript
js获取上传文件大小示例代码
Apr 10 Javascript
javascript带回调函数的异步脚本载入方法实例分析
Jul 02 Javascript
详解JavaScript编程中的数组结构
Oct 24 Javascript
jQuery操作动态生成的内容的方法
May 28 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
Jan 12 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
Aug 14 Javascript
浅谈webpack下的AOP式无侵入注入
Nov 12 Javascript
JavaScript实现异步图像上传功能
Jul 12 Javascript
Angular value与ngValue区别详解
Nov 27 Javascript
微信小程序复选框实现多选一功能过程解析
Feb 14 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
防止MySQL注入或HTML表单滥用的PHP程序
2009/01/21 PHP
几道坑人的PHP面试题 试试看看你会不会也中招
2014/08/19 PHP
Yii框架中memcache用法实例
2014/12/03 PHP
Zend Framework上传文件重命名的实现方法
2016/11/25 PHP
PHP的mysqli_sqlstate()函数讲解
2019/01/23 PHP
JavaScript的public、private和privileged模式
2009/12/28 Javascript
JavaScript 中的日期和时间及表示标准介绍
2013/08/21 Javascript
简单的Jquery遮罩层代码实例
2013/11/14 Javascript
js实现适合新闻类图片的轮播效果
2017/02/05 Javascript
基于Bootstrap框架实现图片切换
2017/03/10 Javascript
深究AngularJS中$sce的使用
2017/06/12 Javascript
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
关于Vue项目跨平台运行问题的解决方法
2018/09/18 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
2020/07/29 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
2019/03/05 Javascript
如何实现vue的tree组件
2020/12/03 Vue.js
[11:42]2018DOTA2国际邀请赛寻真——OG卷土重来
2018/08/17 DOTA
[58:00]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第二场 2月7日
2021/03/11 DOTA
Python Web框架Flask下网站开发入门实例
2015/02/08 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
Python数据预处理之数据规范化(归一化)示例
2019/01/08 Python
python 对类的成员函数开启线程的方法
2019/01/22 Python
对python dataframe逻辑取值的方法详解
2019/01/30 Python
Python函数中参数是传递值还是引用详解
2019/07/02 Python
python空元组在all中返回结果详解
2020/12/15 Python
Shein英国:女性时尚网上商店
2019/04/10 全球购物
英国顶级水晶珠宝零售商之一:Tresor Paris
2019/04/27 全球购物
超市营业员求职简历的自我评价
2013/10/17 职场文书
青年创业培训欢迎词
2014/01/08 职场文书
银行介绍信范文
2014/01/10 职场文书
经济管理毕业生求职信
2014/03/15 职场文书
四风问题查摆材料
2014/08/25 职场文书
出国签证在职证明范本
2014/11/24 职场文书
2015年小学教师培训工作总结
2015/07/21 职场文书
退休劳动合同怎么写?
2019/10/25 职场文书
Python一行代码实现自动发邮件功能
2021/05/30 Python