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 相关文章推荐
jquery ajax return没有返回值的解决方法
Oct 20 Javascript
js去空格技巧分别去字符串前后、左右空格
Oct 21 Javascript
jQuery超赞的评分插件(8款)
Aug 20 Javascript
AngularJS 2.0新特性有哪些
Feb 18 Javascript
JS实现仿百度文库评分功能
Jan 12 Javascript
javascript作用域链与执行环境详解
Mar 25 Javascript
浅谈Postman解决token传参的问题
Mar 31 Javascript
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
关于微信公众号开发无法支付的问题解决
Dec 28 Javascript
vue 实现超长文本截取,悬浮框提示
Jul 29 Javascript
vue+element实现动态加载表单
Dec 13 Vue.js
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 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
《星际争霸》各版本雷兽特点图文解析 雷兽不同形态一览
2020/03/02 星际争霸
PHP合并两个数组的两种方式的异同
2012/09/14 PHP
php的SimpleXML方法读写XML接口文件实例解析
2014/06/16 PHP
php CI框架插入一条或多条sql记录示例
2014/07/29 PHP
PHP基于工厂模式实现的计算器实例
2015/07/16 PHP
php版微信公众号接口实现发红包的方法
2016/10/14 PHP
学习YUI.Ext 第三天
2007/03/10 Javascript
学习jquery之一
2007/04/27 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
2011/08/23 Javascript
Javascript的常规数组和关联数组对比小结
2012/05/24 Javascript
重构Javascript代码示例(重构前后对比)
2013/01/23 Javascript
javascript解决innerText浏览器兼容问题思路代码
2013/05/17 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
2013/11/18 Javascript
javascript的几种继承方法介绍
2016/03/22 Javascript
全面了解JavaScript的数据类型转换
2016/07/01 Javascript
用angular实现多选按钮的全选与反选实例代码
2017/05/23 Javascript
JavaScript用二分法查找数据的实例代码
2017/06/17 Javascript
JS获取子、父、兄节点方法小结
2017/08/14 Javascript
深入浅析JS中的严格模式
2018/06/04 Javascript
vue 循环加载数据并获取第一条记录的方法
2018/09/26 Javascript
node使用request请求的方法
2019/12/20 Javascript
Vue export import 导入导出的多种方式与区别介绍
2020/02/12 Javascript
[56:58]VP vs Optic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python内置的字符串处理函数详细整理(覆盖日常所用)
2014/08/19 Python
Python使用Matplotlib实现Logos设计代码
2017/12/25 Python
Django REST Framework之频率限制的使用
2019/09/29 Python
Python GUI自动化实现绕过验证码登录
2020/01/10 Python
python实现根据给定坐标点生成多边形mask的例子
2020/02/18 Python
一套C++笔试题面试题
2012/06/06 面试题
中层干部岗位职责
2013/12/18 职场文书
幼儿园评语大全
2014/04/17 职场文书
教师工作决心书
2015/02/04 职场文书
2015年政风行风工作总结
2015/04/21 职场文书
大学生村官工作心得体会
2016/01/23 职场文书
Python基于Opencv识别两张相似图片
2021/04/25 Python
SpringBoot快速入门详解
2021/07/21 Java/Android