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跨域问题之跨域iframe自适应大小实现代码
Jul 17 Javascript
jQuery 源码分析笔记(5) jQuery.support
Jun 19 Javascript
jQuery列表拖动排列具体实现
Nov 04 Javascript
javascript框架设计读书笔记之数组的扩展与修复
Dec 02 Javascript
JavaScript组件焦点与页内锚点间传值的方法
Feb 02 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
Mar 31 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
Jan 26 Javascript
浅谈Javascript事件对象
Feb 05 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
Dec 25 Javascript
微信小程序实现简单跑马灯效果
May 26 Javascript
Vue和React有哪些区别
Sep 12 Javascript
JavaScript实现10秒后再次获取验证码
Dec 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
使用sockets:从新闻组中获取文章(一)
2006/10/09 PHP
php生成缩略图的类代码
2008/10/02 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
jquery tools系列 expose 学习
2009/09/06 Javascript
JS 实现Table相同行的单元格自动合并示例代码
2013/08/27 Javascript
子页向父页传值示例
2013/11/27 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
2015/04/14 Javascript
jquery实现页面虚拟键盘特效
2015/08/08 Javascript
异步JS框架的作用以及实现方法
2015/10/29 Javascript
JavaScript实现打开链接页面的方式汇总
2016/06/02 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
2016/08/05 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
2016/11/03 Javascript
JS批量替换内容中关键词为超链接
2017/02/20 Javascript
基于vue中解决v-for使用报红并出现警告的问题
2018/03/03 Javascript
Vue框架TypeScript装饰器使用指南小结
2019/02/18 Javascript
微信小程序入门之指南针
2020/10/22 Javascript
nodejs处理tcp连接的核心流程
2021/02/26 NodeJs
[03:40]DOTA2抗疫特别篇《英雄年代》
2020/02/28 DOTA
Python中的进程分支fork和exec详解
2015/04/11 Python
windows下安装Python和pip终极图文教程
2017/03/05 Python
Python实现识别图片内容的方法分析
2018/07/11 Python
Python3.5面向对象编程图文与实例详解
2019/04/24 Python
Python实现使用dir获取类的方法列表
2019/12/24 Python
Jmeter HTTPS接口测试证书导入过程图解
2020/07/22 Python
深入了解Python 变量作用域
2020/07/24 Python
基于Python的接口自动化unittest测试框架和ddt数据驱动详解
2021/01/27 Python
美国旅游网站:Tours4Fun
2017/02/17 全球购物
英国网上购买肉类网站:Great British Meat
2018/10/17 全球购物
医学类导师推荐信范文
2013/11/19 职场文书
教师国庆节演讲稿范文2014
2014/09/21 职场文书
领导干部作风建设剖析材料
2014/10/11 职场文书
党支部先进事迹材料
2014/12/24 职场文书
2015年度房地产工作总结
2015/04/09 职场文书
虎兄虎弟观后感
2015/06/12 职场文书
工作时间证明
2015/06/15 职场文书
关于感恩的歌曲整理(8首)
2019/08/14 职场文书