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 相关文章推荐
经常用的图片在容器中的水平垂直居中实例
Jun 10 Javascript
javascript实现上传图片前的预览(TX的面试题)
Aug 20 Javascript
JavaScript 学习笔记(五)
Dec 31 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
Nov 10 Javascript
文本框回车提交与禁止提交示例
Sep 27 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
Nov 03 Javascript
js实现仿qq消息的弹出窗效果
Jan 06 Javascript
JavaScript中数组去除重复的三种方法
Apr 22 Javascript
Vue.js计算属性computed与watch(5)
Dec 09 Javascript
jQuery基本选择器和层次选择器学习使用
Feb 27 Javascript
React 使用browserHistory项目访问404问题解决
Jun 01 Javascript
js常用正则表达式集锦
May 17 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
56.com视频采集接口程序(PHP)
2007/09/22 PHP
PHP文件打开、关闭、写入的判断与执行代码
2011/05/24 PHP
浅谈php扩展imagick
2014/06/02 PHP
jquery中防刷IP流量软件影响统计的一点对策
2011/07/10 Javascript
游览器中javascript的执行过程(图文)
2012/05/20 Javascript
js中Image对象以及对其预加载处理示例
2013/11/20 Javascript
setTimeout自动触发一个js的方法
2014/01/15 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
2014/05/13 Javascript
JavaScript实现在标题栏上显示当前日期的方法
2015/03/19 Javascript
JavaScript获取页面中表单(form)数量的方法
2015/04/03 Javascript
javascript函数特点实例分析
2015/05/14 Javascript
jQuery实现放大镜效果实例代码
2016/03/17 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
2016/03/24 Javascript
Bootstrap基本插件学习笔记之按钮(21)
2016/12/08 Javascript
微信小程序获取循环元素id以及wx.login登录操作
2017/08/17 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
2018/08/12 Javascript
浅谈Vue项目骨架屏注入实践
2019/08/05 Javascript
Nuxt使用Vuex的方法示例
2019/09/06 Javascript
[03:40]DOTA2抗疫特别篇《英雄年代》
2020/02/28 DOTA
实例说明Python中比较运算符的使用
2015/05/13 Python
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
Python安装及Pycharm安装使用教程图解
2019/09/20 Python
如何更换python默认编辑器的背景色
2020/08/10 Python
基于python实现简单C/S模式代码实例
2020/09/14 Python
Python实现随机爬山算法
2021/01/29 Python
matplotlib之属性组合包(cycler)的使用
2021/02/24 Python
HTML5新增属性data-*和js/jquery之间的交互及注意事项
2017/08/08 HTML / CSS
前端H5 Video常见使用场景简介
2020/08/21 HTML / CSS
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
eBay荷兰购物网站:eBay.nl
2020/06/26 全球购物
什么是Linux虚拟文件系统VFS
2015/08/25 面试题
《掌声》教学反思
2014/02/23 职场文书
项目合作意向书范本
2014/04/01 职场文书
搞笑的爱情检讨书
2014/10/01 职场文书
毕业设计致谢语
2015/05/14 职场文书
范文之农村基层党建工作报告
2019/10/24 职场文书