jQuery setTimeout()函数使用方法
更新时间：2013年04月07日 23:09:15 作者：
setTimeout在以前的js中是定时执行一个对象或函数，下面我来介绍jquery中的setTimeout函数使用方法有需要了解的朋友仔细的参考参考
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); //这一句是正常的, 明白两者之间的区别了吧
});
从载入后延迟指定的时间去执行一个表达式或者是函数;
仅执行一次 ;和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); //这一句是正常的, 明白两者之间的区别了吧
});
相关文章
这篇文章主要介绍了jQuery平滑旋转幻灯片特效，一个具有自己特色的幻灯片会吸引用户的注意力，让用户产生浏览网站的兴趣至关重要，现在小编推荐给大家一款特别棒的幻灯片，感兴趣的小伙伴可以参考下。2015-09-09
前天在项目中写的一个ajax jsonp的使用，出现了问题：可以成功获得请求结果，但没有执行success方法2011-10-10
jQuery计算textarea中文字数(剩余个数)的小程序
这篇文章主要介绍了jQuery计算textarea中文字数(剩余个数)的示例程序，大家参考使用吧2013-11-11
这篇文章主要为大家详细介绍了jquery实现倒计时功能，详细介绍了setInterval()方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-12-12
这篇文章主要为大家详细介绍了jQuery Ajax上传文件的相关代码,需要的朋友可以参考下2016-03-03
这篇文章主要介绍了jQuery实现的超链接提示效果,结合实例形式对比分析了jQuery实现的带有loading动态图效果的提示文字以及默认提示文字显示效果,并附带demo源码供读者下载参考,需要的朋友可以参考下2016-09-09
昨天晚上公司遇到个小需求，就是实现类似表格冻结顶栏的效果。这篇文章主要介绍了jQuery实现表格冻结顶栏效果 ,需要的朋友可以参考下2017-08-08
Jquery中使用show()与hide()方法动画显示和隐藏图片
以前我们在js中如果要隐藏显示一个元素我们需要利用display等于none来设置并且还没有效果，现在在jquery中有了hide();我们可以利用hide()方法来操作，希望本文章给大家所有帮助。2015-10-10
用jquery解析JSON数据的方法,作为jquery异步请求的传输对象，jquery请求后返回的结果是json对象,这里考虑的都是服务器返回JSON形式的字符串的形式，对于利用JSONObject等插件封装的JSON对象，与此亦是大同小异，这里不再做说明2015-03-03
这篇文章主要介绍了jQuery实现的一个自定义Placeholder属性插件,本文最后附有插件完整源码,需要的朋友可以参考下2014-08-08
最新评论