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实现在Repeater控件中创建可隐藏区域的代码
Sep 16 Javascript
初学js 新节点的创建 删除 的步骤
Jul 04 Javascript
js加密解密字符串可自定义密码因子
May 13 Javascript
jQuery实现平滑滚动的标签分栏切换效果
Aug 28 Javascript
jQuery实现可编辑的表格实例讲解(2)
Sep 17 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
Apr 15 Javascript
移动web开发之touch事件实例详解
Jan 17 Javascript
使用vux实现上拉刷新功能遇到的坑
Feb 08 Javascript
vue中的provide/inject的学习使用
May 09 Javascript
浅谈手写node可读流之流动模式
Jun 01 Javascript
vue实现给div绑定keyup的enter事件
Jul 31 Javascript
Swiper实现导航栏滚动效果
Oct 16 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变量范围介绍
2012/10/15 PHP
php代码审计比较有意思的例子
2014/05/07 PHP
XHProf报告字段含义的解析
2016/05/17 PHP
php中__toString()方法用法示例
2016/12/07 PHP
JS+PHP实现用户输入数字后显示最大的值及所在位置
2017/06/19 PHP
PHP用continue跳过本次循环中剩余代码的注意点
2017/06/27 PHP
centos7上编译安装php7以php-fpm方式连接apache
2018/11/08 PHP
有关JavaScript的10个怪癖和秘密分享
2011/08/28 Javascript
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
JS保留两位小数 四舍五入函数的小例子
2013/11/20 Javascript
jquery、js操作checkbox全选反选
2014/03/12 Javascript
使用jQuery仿苹果官网焦点图特效
2014/12/23 Javascript
JavaScript整除运算函数ceil和floor的区别分析
2015/04/14 Javascript
js 截取或者替换字符串中的数字实现方法
2016/06/13 Javascript
详解Javascript获取缓存和清除缓存API
2017/05/25 Javascript
浅谈angular4生命周期钩子
2017/09/05 Javascript
vue打包后显示空白正确处理方法
2017/11/01 Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
2017/11/30 Javascript
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
python消除序列的重复值并保持顺序不变的实例
2018/11/08 Python
将python依赖包打包成window下可执行文件bat方式
2019/12/26 Python
Python多线程获取返回值代码实例
2020/02/17 Python
解决Jupyter notebook中.py与.ipynb文件的import问题
2020/04/21 Python
Django 解决由save方法引发的错误
2020/05/21 Python
管理心得体会
2013/12/28 职场文书
无故旷工检讨书
2014/01/26 职场文书
最新大学生创业计划书写作攻略
2014/04/02 职场文书
大学生标准自荐书
2014/06/15 职场文书
小学校园广播稿(3篇)
2014/09/19 职场文书
党的群众路线教育实践活动对照检查材料
2014/09/22 职场文书
绵山导游词
2015/02/05 职场文书
应届生简历自我评价
2015/03/11 职场文书
2015年学校体育工作总结
2015/04/22 职场文书
安全守法证明
2015/06/23 职场文书
八一建军节主持词
2015/07/01 职场文书
在JavaScript中如何使用宏详解
2021/05/06 Javascript