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 相关文章推荐
鼠标经过的文本框textbox变色
May 21 Javascript
JavaScript 判断日期格式是否正确的实现代码
Jul 04 Javascript
使用JSLint提高JS代码质量方法分享
Dec 16 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
Jun 19 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
Jan 23 Javascript
谈谈对vue响应式数据更新的误解
Aug 01 Javascript
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
详解JavaScript实现动态的轮播图效果
Apr 29 Javascript
Vue编程式跳转的实例代码详解
Jul 10 Javascript
ElementUI中el-tree节点的操作的实现
Feb 27 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
Apr 01 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
Apr 15 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
解决phpmyadmin中文乱码问题。。。
2007/01/18 PHP
实战mysql导出中文乱码及phpmyadmin导入中文乱码的解决方法
2010/06/11 PHP
PDO版本问题 Invalid parameter number: no parameters were bound
2013/01/06 PHP
php+mysql结合Ajax实现点赞功能完整实例
2015/01/30 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
php源码的安装方法和实例
2019/09/26 PHP
js实现拖拽 闭包函数详细介绍
2012/11/25 Javascript
javascript替换已有元素replaceChild()使用介绍
2014/04/03 Javascript
jquery重复提交请求的原因浅析
2014/05/23 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
2014/10/16 Javascript
JavaScript实现的多个图片广告交替显示效果代码
2015/09/04 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
2015/09/16 Javascript
javascript 用函数实现继承详解
2016/05/28 Javascript
AngularJS基础 ng-href 指令用法
2016/08/01 Javascript
jQuery Password Validation密码验证
2016/12/30 Javascript
jQuery插件Echarts实现的渐变色柱状图
2017/03/23 jQuery
JS实现电商放大镜效果
2017/08/24 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
微信小程序常用简易小函数总结
2019/02/01 Javascript
layer.js open 隐藏滚动条的例子
2019/09/05 Javascript
JS数组方法slice()用法实例分析
2020/01/18 Javascript
[01:35]2014DOTA2西雅图邀请赛 专访狐狸妈青春献给刀塔
2014/07/08 DOTA
Python基本数据类型详细介绍
2014/03/11 Python
python绘图库Matplotlib的安装
2014/07/03 Python
Python常用小技巧总结
2015/06/01 Python
解决python3 安装完Pycurl在import pycurl时报错的问题
2018/10/15 Python
Python 字符串类型列表转换成真正列表类型过程解析
2019/08/26 Python
TensorBoard 计算图的可视化实现
2020/02/15 Python
幼儿园教师个人反思
2014/01/30 职场文书
仓库主管岗位职责
2014/03/02 职场文书
秸秆管理实施方案
2014/03/15 职场文书
保证书格式范文
2014/04/28 职场文书
自动化专业大学生职业生涯规划范文:爱拚才会赢
2014/09/12 职场文书
安全员岗位职责
2015/02/10 职场文书
简历中的自我评价应该这样写!
2019/07/12 职场文书
Spring中的@Transactional的工作原理
2022/06/05 Java/Android