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 相关文章推荐
JavaScript学习笔记(十)
Jan 17 Javascript
jquery div 居中技巧应用介绍
Nov 24 Javascript
深入理解Javascript中的循环优化
Nov 09 Javascript
jQuery中scrollLeft()方法用法实例
Jan 16 Javascript
关于Vue.nextTick()的正确使用方法浅析
Aug 25 Javascript
angularjs实现猜大小功能
Oct 23 Javascript
Vue 中的compile操作方法
Feb 26 Javascript
如何在基于vue-cli的项目自定义打包环境
Nov 10 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
Oct 15 Javascript
微信小程序动态设置图片大小的方法
Nov 21 Javascript
JQuery获得内容和属性方法解析
May 30 jQuery
JavaScript Html实现移动端红包雨功能页面
Jan 10 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
php Notice: Undefined index 错误提示解决方法
2010/08/29 PHP
php导出word文档与excel电子表格的简单示例代码
2014/03/08 PHP
smarty简单应用实例
2015/11/03 PHP
总结PHP中DateTime的常用方法
2016/08/11 PHP
PHP实现的二分查找算法实例分析
2017/12/19 PHP
php微信公众号开发之音乐信息
2018/10/20 PHP
JavaScript设置FieldSet展开与收缩
2009/05/15 Javascript
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
2010/10/18 Javascript
悄悄用脚本检查你访问过哪些网站的代码
2010/12/04 Javascript
IE6、IE7中获取Button元素的值的bug说明
2011/08/28 Javascript
jQuery EasyUI API 中文文档 - ComboBox组合框
2011/10/07 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
2015/03/13 Javascript
JavaScript实现随机替换图片的方法
2015/04/16 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
2016/06/22 Javascript
JS基于递归实现倒计时效果的方法
2016/11/26 Javascript
ES6新特性之Symbol类型用法分析
2017/03/31 Javascript
VUE多层路由嵌套实现代码
2017/05/15 Javascript
详解nodejs微信jssdk后端接口
2017/05/25 NodeJs
Angular 表单控件示例代码
2017/06/26 Javascript
vue.js全局API之nextTick全面解析
2017/07/07 Javascript
javascript基本常用排序算法解析
2017/09/27 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
2018/08/28 Javascript
JavaScript实现图片轮播特效
2019/10/23 Javascript
JS array数组检测方式解析
2020/05/19 Javascript
vue项目查看vue版本及cli版本的实现方式
2020/10/24 Javascript
基于scrapy的redis安装和配置方法
2018/06/13 Python
Python字典生成式、集合生成式、生成器用法实例分析
2020/01/07 Python
html5 http的轮询和Websocket原理
2018/10/19 HTML / CSS
Stokke美国官方网店:高级儿童家具、推车、汽车座椅和配件
2020/06/06 全球购物
新媒传信软件测试面试题
2013/02/24 面试题
周年庆典主持词
2014/04/02 职场文书
读书之星事迹材料
2014/05/12 职场文书
2014学生会工作总结报告
2014/12/02 职场文书
党员年度个人总结
2015/02/14 职场文书
退休教师追悼词
2015/06/23 职场文书
Win10服务主机占用内存怎么办?Win10服务主机进程占用大量内存解决方法
2022/09/23 数码科技