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 相关文章推荐
JavaScript操作Cookie方法实例分析
May 27 Javascript
javascript实现textarea中tab键的缩排处理方法
Jun 26 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
Jan 15 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
May 30 Javascript
jQueryUI Datepicker组件设置日期高亮
Oct 13 Javascript
关于JavaScript中事件绑定的方法总结
Oct 26 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
Jan 19 Javascript
详解Angular的8个主要构造块
Jun 20 Javascript
jQuery表单设置值的方法
Jun 30 jQuery
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
Sep 12 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
Jul 05 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
Sep 02 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
第六节--访问属性和方法
2006/11/16 PHP
二招解决php乱码问题
2012/03/25 PHP
PHP保留两位小数并且四舍五入及不四舍五入的方法
2013/09/22 PHP
基于php解决json_encode中文UNICODE转码问题
2020/11/10 PHP
Jquery Ajax解析XML数据(同步及异步调用)简单实例
2014/02/12 Javascript
JavaScript 开发工具webstrom使用指南
2014/12/09 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
2016/11/09 Javascript
微信小程序 Nginx环境配置详细介绍
2017/02/14 Javascript
ReactJs设置css样式的方法
2017/06/08 Javascript
Angular 4.0学习教程之架构详解
2017/09/12 Javascript
详解VueRouter进阶之导航钩子和路由元信息
2017/09/13 Javascript
JS实现的邮箱提示补全效果示例
2018/01/30 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
2018/06/14 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
2019/01/24 jQuery
详解Vue.directive 自定义指令
2019/03/27 Javascript
js实现删除li标签一行内容
2019/04/16 Javascript
浅谈Vuex注入Vue生命周期的过程
2019/05/20 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
2019/07/10 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
2019/12/16 Javascript
Python合并多个装饰器小技巧
2015/04/28 Python
python贪婪匹配以及多行匹配的实例讲解
2018/04/19 Python
Python2.7环境Flask框架安装简明教程【已测试】
2018/07/13 Python
Python简单基础小程序的实例代码
2019/04/28 Python
Python loguru日志库之高效输出控制台日志和日志记录
2020/03/07 Python
python将字典内容写入json文件的实例代码
2020/08/12 Python
巾帼建功标兵事迹材料
2014/05/11 职场文书
工业设计专业自荐书
2014/06/05 职场文书
五一促销活动总结
2014/07/01 职场文书
竞选班干部演讲稿100字
2014/08/20 职场文书
2014办公室年度工作总结
2014/12/09 职场文书
结婚保证书(三从四德)
2015/02/26 职场文书
聋哑人盗窃罪辩护词
2015/05/21 职场文书
未婚证明范本
2015/06/15 职场文书
2016年春季趣味运动会开幕词
2016/03/04 职场文书
演讲稿:态度决定一切
2019/04/02 职场文书
win10安装配置nginx的过程
2021/03/31 Servers