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中cookie的使用详细分析
May 28 Javascript
jQuery实用基础超详细介绍
Apr 11 Javascript
JS返回上一页实例代码通过图片和按钮分别实现
Aug 16 Javascript
如何获取select下拉框的值(option没有及有value属性)
Nov 08 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
Oct 11 Javascript
在Node.js应用中使用Redis的方法简介
Jun 24 Javascript
js字符串操作总结(必看篇)
Nov 22 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
Apr 10 Javascript
JS实现留言板功能[楼层效果展示]
Dec 27 Javascript
微信小程序定义和调用全局变量globalData的实现
Nov 01 Javascript
详解vue beforeEach 死循环问题解决方法
Feb 25 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
Aug 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
PHP Parse Error: syntax error, unexpected $end 错误的解决办法
2012/06/05 PHP
PHP基于数组实现的分页函数实例
2014/08/20 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
php对象工厂类完整示例
2018/08/09 PHP
学习ExtJS fit布局使用说明
2009/10/08 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
2011/02/24 Javascript
原生js实现查找/添加/删除/指定元素的class
2013/04/12 Javascript
使用jquery实现div的tab切换实例代码
2013/05/27 Javascript
jQuery 中国省市两级联动选择附图
2014/05/14 Javascript
使用javascript获取页面名称
2014/12/23 Javascript
Angularjs基础知识及示例汇总
2015/01/22 Javascript
jQuery+ajax实现无刷新级联菜单示例
2015/05/21 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
2015/09/10 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
2016/06/12 Javascript
AngularJS入门教程之过滤器详解
2016/08/19 Javascript
详解Vue2.0之去掉组件click事件的native修饰
2017/04/20 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
2018/02/12 jQuery
[03:24]CDEC.Y赛前采访 努力备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
python随机取list中的元素方法
2018/04/08 Python
python 反向输出字符串的方法
2018/07/16 Python
Python弹出输入框并获取输入值的实例
2019/06/18 Python
Python下利用BeautifulSoup解析HTML的实现
2020/01/17 Python
Numpy 理解ndarray对象的示例代码
2020/04/03 Python
浅谈Keras中shuffle和validation_split的顺序
2020/06/19 Python
优秀大学生推荐信范文
2013/11/28 职场文书
会计求职信
2014/05/29 职场文书
学生夜不归宿检讨书
2014/09/23 职场文书
教师正风肃纪剖析材料
2014/10/20 职场文书
旷课检讨书
2015/01/26 职场文书
2015年学校政教处工作总结
2015/05/26 职场文书
车辆安全隐患排查制度
2015/08/05 职场文书
离婚财产分割协议书
2015/08/11 职场文书
2016年社区国庆节活动总结
2016/04/01 职场文书
八年级作文之友谊
2019/12/02 职场文书
Python入门之基础语法详解
2021/05/11 Python
pytorch中[..., 0]的用法说明
2021/05/20 Python