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 相关文章推荐
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
Jan 07 Javascript
利用了jquery的ajax实现二级联互动菜单
Dec 02 Javascript
javascript中不等于的代码是什么怎么写
Dec 29 Javascript
js实现图片和链接文字同步切换特效的方法
Feb 20 Javascript
js获取滚动距离的方法
May 30 Javascript
JQuery validate 验证一个单独的表单元素实例
Feb 17 Javascript
利用纯JS实现像素逐渐显示的方法示例
Aug 14 Javascript
webpack3+React 的配置全解
Aug 21 Javascript
Vue页面跳转动画效果的实现方法
Sep 23 Javascript
angular6 填坑之sdk的方法
Dec 27 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
Sep 10 Javascript
Vue中插槽slot的使用方法与应用场景详析
Jun 08 Vue.js
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
discuz论坛 用户登录 后台程序代码
2008/11/27 PHP
PHP下对数组进行排序的函数
2010/08/08 PHP
php实现根据字符串生成对应数组的方法
2014/09/22 PHP
PHP中addslashes与mysql_escape_string的区别分析
2016/04/25 PHP
Laravel框架自定义验证过程实例分析
2019/02/01 PHP
给jqGrid数据行添加修改和删除操作链接(之一)
2011/11/04 Javascript
js+div实现图片滚动效果代码
2014/02/10 Javascript
jQuery简单实现图片预加载
2015/04/20 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
2015/04/24 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
2015/05/03 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
基于jquery实现的鼠标悬停提示案例
2016/12/11 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
2016/12/12 Javascript
Spring Boot/VUE中路由传递参数的实现代码
2018/03/02 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
2020/11/03 Javascript
[03:38]2014DOTA2西雅图国际邀请赛 VG战队巡礼
2014/07/07 DOTA
python实现在windows服务中新建进程的方法
2015/06/30 Python
详解Python中contextlib上下文管理模块的用法
2016/06/28 Python
利用python程序帮大家清理windows垃圾
2017/01/15 Python
Python实现分段线性插值
2018/12/17 Python
python数据挖掘需要学的内容
2019/06/23 Python
Django 权限认证(根据不同的用户,设置不同的显示和访问权限)
2019/07/24 Python
django rest framework serializers序列化实例
2020/05/13 Python
一文带你了解Python 四种常见基础爬虫方法介绍
2020/12/04 Python
两种CSS3伪类选择器详细介绍
2013/12/24 HTML / CSS
详解html5 canvas常用api总结(二)--绘图API
2016/12/14 HTML / CSS
加拿大折扣、优惠券和交易网站:WagJag
2018/02/07 全球购物
美国克罗格超市在线购物:Kroger
2019/06/21 全球购物
十八届三中全会个人学习材料
2014/02/13 职场文书
幼儿园毕业教师感言
2014/02/21 职场文书
经济担保书范文
2014/04/02 职场文书
分公司负责人任命书
2014/06/04 职场文书
庆祝国庆节标语
2014/10/09 职场文书
先进教师事迹材料
2014/12/16 职场文书
Python图片处理之图片裁剪教程
2021/05/27 Python
python游戏开发Pygame框架
2022/04/22 Python