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调用WebService的示例
Apr 07 Javascript
自己整理的一个javascript日期处理函数
Oct 16 Javascript
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
Oct 26 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
Apr 01 Javascript
跟我学习javascript解决异步编程异常方案
Nov 23 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
Nov 26 Javascript
浅析Javascript中bind()方法的使用与实现
May 30 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
Oct 13 Javascript
简单了解JavaScript异步
May 23 Javascript
JavaScript forEach中return失效问题解决方案
Jun 01 Javascript
浅谈js数组splice删除某个元素爬坑
Oct 14 Javascript
JavaScript canvas实现流星特效
May 20 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下通过file_get_contents的代理使用方法
2011/02/16 PHP
比较简单的百度网盘文件直链PHP代码
2013/03/24 PHP
PHP递归统计系统中代码行数
2019/09/19 PHP
PHP图像处理 imagestring添加图片水印与文字水印操作示例
2020/02/06 PHP
JQuery对表格进行操作的常用技巧总结
2014/04/23 Javascript
nodejs npm install全局安装和本地安装的区别
2014/06/05 NodeJs
js锁屏解屏通过对$.ajax进行封装实现
2014/07/31 Javascript
javascript实现验证IP地址等相关信息代码
2015/05/10 Javascript
快速实现jQuery多级菜单效果
2017/02/01 Javascript
详解react如何在组件中获取路由参数
2017/06/15 Javascript
JS实现评价的星星功能
2017/08/20 Javascript
浅谈函数调用的不同方式,以及this的指向
2017/09/17 Javascript
ES6学习笔记之map、set与数组、对象的对比
2018/03/01 Javascript
jQuery实现遍历XML节点和属性的方法示例
2018/04/29 jQuery
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
2018/07/13 Javascript
js中getter和setter用法实例分析
2018/08/14 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
2019/06/13 Javascript
JavaScript canvas仿代码流瀑布
2020/02/10 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
2020/12/09 Javascript
[49:05]OG vs Newbee 2019DOTA2国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
将Python中的数据存储到系统本地的简单方法
2015/04/11 Python
将Django框架和遗留的Web应用集成的方法
2015/07/24 Python
PyQt5每天必学之QSplitter实现窗口分隔
2018/04/19 Python
python实现简单淘宝秒杀功能
2018/05/03 Python
python实现转圈打印矩阵
2019/03/02 Python
python numpy中cumsum的用法详解
2019/10/17 Python
Python 实现取多维数组第n维的前几位
2019/11/26 Python
tensorflow常用函数API介绍
2020/04/19 Python
PyQt5 QDockWidget控件应用详解
2020/08/12 Python
波比布朗英国官网:Bobbi Brown英国
2017/11/13 全球购物
巴基斯坦购物网站:Goto
2019/03/11 全球购物
优秀少先队辅导员事迹材料
2014/12/24 职场文书
就业意向书范本
2015/05/11 职场文书
2016年清明节红领巾广播稿
2015/12/17 职场文书
解决Navicat for Mysql连接报错1251的问题(连接失败)
2021/05/27 MySQL
使用Cargo工具高效创建Rust项目
2022/08/14 Javascript