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 相关文章推荐
基于jquery的固定表头和列头的代码
May 03 Javascript
jquery获取div距离窗口和父级dv的距离示例
Oct 10 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
Oct 18 Javascript
javascript实现多级联动下拉菜单的方法
Feb 06 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
Oct 10 Javascript
JS日期加减,日期运算代码
Nov 05 Javascript
全面理解闭包机制
Jul 11 Javascript
学习Angular中作用域需要注意的坑
Aug 17 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 Javascript
微信小程序调用摄像头隐藏式拍照功能
Aug 22 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
Aug 22 Javascript
详解可以用在VS Code中的正则表达式小技巧
May 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
不错的PHP学习之php4与php5之间会穿梭一点点感悟
2007/05/03 PHP
PHP5中使用PDO连接数据库的方法
2010/08/01 PHP
PHP+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
php中使用Akismet防止垃圾评论的代码
2011/06/10 PHP
PHP多维数组排序array详解
2017/11/21 PHP
PHP应用跨时区功能的实现方法
2019/03/21 PHP
THREE.JS入门教程(4)创建粒子系统
2013/01/24 Javascript
jQuery动态地获取系统时间实现代码
2013/05/24 Javascript
jQuery之自动完成组件的深入解析
2013/06/19 Javascript
JS中判断null、undefined与NaN的方法
2014/03/24 Javascript
Node.js的特点和应用场景介绍
2014/11/04 Javascript
JavaScript中的闭包(Closure)详细介绍
2014/12/30 Javascript
bootstrap实现图片自动轮播
2016/12/21 Javascript
微信小程序实现滑动删除效果
2017/05/19 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
2017/08/18 jQuery
关于Ajax的原理以及代码封装详解
2017/09/08 Javascript
vue 指定组件缓存实例详解
2018/04/01 Javascript
vue2.0 中使用transition实现动画效果使用心得
2018/08/13 Javascript
微信小程序实现多选框全选与取消全选功能示例
2019/05/14 Javascript
解决Layui数据表格的宽高问题
2019/09/28 Javascript
python动态监控日志内容的示例
2014/02/16 Python
详解Python设计模式编程中观察者模式与策略模式的运用
2016/03/02 Python
用Python解决计数原理问题的方法
2016/08/04 Python
python图的深度优先和广度优先算法实例分析
2019/10/26 Python
如何解决tensorflow恢复模型的特定值时出错
2020/02/06 Python
python中wheel的用法整理
2020/06/15 Python
python用什么编辑器进行项目开发
2020/06/17 Python
python爬虫看看虎牙女主播中谁最“顶”步骤详解
2020/12/01 Python
意大利在线药房:Saninforma
2021/02/11 全球购物
小学少先队活动方案
2014/02/18 职场文书
家教广告词
2014/03/19 职场文书
作文批改评语大全
2014/04/23 职场文书
金融专业银行实习证明模板
2014/11/28 职场文书
销售开票员岗位职责
2015/04/15 职场文书
分享Python异步爬取知乎热榜
2022/04/12 Python
Apache自带的ab压力测试工具的实现
2022/07/23 Servers