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 (四) jQuery中操作元素的属性与样式
Feb 23 Javascript
3款实用的在线JS代码工具(国外)
Mar 15 Javascript
javascript ready和load事件的区别示例介绍
Aug 30 Javascript
JS自定义选项卡函数及用法实例分析
Sep 02 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
May 16 Javascript
JQuery 设置checkbox值二次无效的解决方法
Jul 22 Javascript
教你一步步用jQyery实现轮播器
Dec 18 Javascript
Vue.js对象转换实例
Jun 07 Javascript
浅谈webpack编译vue项目生成的代码探索
Dec 11 Javascript
vue中rem的配置的方法示例
Aug 30 Javascript
微信小程序使用wxParse解析html的实现示例
Aug 30 Javascript
vuex实现购物车的增加减少移除
Jun 28 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实现的随机IP函数【国内IP段】
2016/07/20 PHP
Laravel 5.3 学习笔记之 错误&amp;日志
2016/08/28 PHP
PhpStorm2020 + phpstudyV8 +XDebug的教程详解
2020/09/17 PHP
js null,undefined,字符串小结
2010/08/21 Javascript
JS保存和删除cookie操作 判断cookie是否存在
2013/11/13 Javascript
nodejs中使用monk访问mongodb
2014/07/06 NodeJs
JavaScript中的ubound函数使用实例
2014/11/04 Javascript
轻松创建nodejs服务器(10):处理POST请求
2014/12/18 NodeJs
iframe跨域通信封装详解
2015/08/11 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
2015/08/25 Javascript
javascript 继承学习心得总结
2016/03/17 Javascript
jquery对象与DOM对象转化
2017/02/08 Javascript
jQuery实现上传图片前预览效果功能
2017/08/03 jQuery
Angular 2.0+ 的数据绑定的实现示例
2017/08/09 Javascript
bootstrap实现二级下拉菜单效果
2017/11/23 Javascript
JS中获取 DOM 元素的绝对位置实例详解
2018/04/23 Javascript
详解如何运行vue项目
2019/04/15 Javascript
JS+DIV实现拖动效果
2020/02/11 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
2020/02/12 Javascript
使用js获取身份证年龄的示例代码
2020/12/11 Javascript
[01:33:30]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第二场 2月5日
2021/03/11 DOTA
Python反射和内置方法重写操作详解
2018/08/27 Python
python散点图实例之随机漫步
2018/08/27 Python
Pytorch卷积层手动初始化权值的实例
2019/08/17 Python
django 前端页面如何实现显示前N条数据
2020/03/16 Python
vscode+PyQt5安装详解步骤
2020/08/12 Python
python os.rename实例用法详解
2020/12/06 Python
python3定位并识别图片验证码实现自动登录功能
2021/01/29 Python
Css3实现无缝滚动防抖
2020/09/14 HTML / CSS
车贷收入证明范本
2014/01/09 职场文书
新课培训心得体会
2014/09/03 职场文书
领导班子专题民主生活会情况想汇报
2014/09/30 职场文书
业务内勤岗位职责
2015/04/13 职场文书
新学期开学寄语2016
2015/12/04 职场文书
2016个人先进事迹材料范文
2016/03/01 职场文书
数据库的高级查询六:表连接查询:外连接(左外连接,右外连接,UNION关键字,连接中ON与WHERE的不同)
2021/04/05 MySQL