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 相关文章推荐
实现png图片和png背景透明(支持多浏览器)的方法
Sep 08 Javascript
jQuery 使用手册(四)
Sep 23 Javascript
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
Feb 18 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
Apr 20 Javascript
js实现星星打分效果的方法
Jul 05 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
Oct 10 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
微信小程序功能之全屏滚动效果的实现代码
Nov 22 Javascript
Node.js Windows Binary二进制文件安装方法
May 16 Javascript
IDEA安装vue插件图文详解
Sep 26 Javascript
JavaScript中的this/call/apply/bind的使用及区别
Mar 06 Javascript
详解JS函数防抖
Jun 05 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
Linux环境下搭建php开发环境的操作步骤
2013/06/17 PHP
PHP实现加密的几种方式介绍
2015/02/22 PHP
php 问卷调查结果统计
2015/10/08 PHP
简单的pgsql pdo php操作类实现代码
2016/08/25 PHP
php实用代码片段整理
2016/11/12 PHP
PHP设计模式之工厂模式详解
2017/10/24 PHP
PHP设计模式(一)工厂模式Factory实例详解【创建型】
2020/05/02 PHP
php对mongodb的扩展(初识如故)
2012/11/11 Javascript
jquery固定底网站底部菜单效果
2013/08/13 Javascript
JS中判断JSON数据是否存在某字段的方法
2014/03/07 Javascript
jquery中object对象循环遍历的方法
2015/12/18 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
2016/08/02 Javascript
JavaScript lodash常见用法系列小结
2016/08/24 Javascript
jQuery组件easyui基本布局实现代码
2016/08/25 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
2016/08/29 Javascript
Angular 2应用的8个主要构造块有哪些
2016/10/17 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
2016/10/25 Javascript
js实现鼠标左右移动,图片也跟着移动效果
2017/01/25 Javascript
从零学习node.js之mysql数据库的操作(五)
2017/02/24 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
2017/05/20 Javascript
nodejs+mongodb aggregate级联查询操作示例
2018/03/17 NodeJs
Vue父组件如何获取子组件中的变量
2019/07/24 Javascript
在vue中高德地图引入和轨迹的绘制的实现
2019/10/11 Javascript
python模拟登陆阿里妈妈生成商品推广链接
2014/04/03 Python
Python中DJANGO简单测试实例
2015/05/11 Python
HTML5本地存储之Web Storage应用介绍
2013/01/06 HTML / CSS
韩国爱茉莉太平洋化妆品美国站:Amore Pacific US
2016/10/28 全球购物
J2EE包括哪些技术
2016/11/25 面试题
学生会副主席竞聘书
2014/03/31 职场文书
事假请假条范文
2014/04/11 职场文书
十佳护士先进事迹
2014/05/08 职场文书
初婚初育证明范本
2014/11/24 职场文书
2014年六五普法工作总结
2014/11/25 职场文书
学校捐书倡议书
2015/04/27 职场文书
SpringCloud的JPA连接PostgreSql的教程
2021/06/26 Java/Android
python3操作redis实现List列表实例
2021/08/04 Python