jQuery中setTimeout的几种使用方法小结

我们通过例子来说明一下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); //这一句是正常的, 明白两者之间的区别了吧
 });

赞 (0)

相关推荐

  • Jquery倒数计时按钮setTimeout的实例代码

    复制代码 代码如下: <head runat="server">    <title></title>    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>    <script type="text/javascript">        var timeout;    

  • JQuery中SetTimeOut传参问题探讨

    无论是window.setTimeout还是window.setInterval,在使用函数名作为调用句柄时都不能带参数.如果想要传入参数,自定义参数也好,事件参数event也好,解决办法是在此函数的基础上在做一层封装.其具体原理还不清楚,但是下边的办法确实能解决这个问题. 先看一个简单的代码: 复制代码 代码如下: function show(){ alert("Hello World"); } setTimeout(show,1000); 这段代码的效果是在1秒后显示hello w

  • jQuery setTimeout()函数使用方法

    setTimeout()从载入后延迟指定的时间去执行一个表达式或者是函数;仅执行一次 ;和window.clearTimeout一起使用. 我在 复制代码 代码如下: $(document).ready(function(){setTimout(test(),200); function test() { alert(1); } }); 只会执行一次,有朋友说可以使用 复制代码 代码如下: setInterval ("showTime()", 5000);function showTi

  • setInterval,setTimeout与jquery混用的问题

    方法1. 直接在ready中调用其他方法,会提示缺少对象的错误,应用jQuery的扩展可以解决这个问题. 复制代码 代码如下: $(document).ready(function(){ $.extend({  show:function(){   alert("ready");  }});setInterval("$.show()",3000);}); 方法2. 指定定时执行的函数时不要使用引号和括号. 复制代码 代码如下: function show(){  

  • sliderToggle在写jquery的计时器setTimeouter中不生效

    今天在写jquery时发现sliderToggle在setTimeouter中不生效,还报错说是发生了意想不到的错误.看了很久也没明白后来猛然发现使用show();hide():就可以. bootstrap的一些学习笔记. 首先应该了解其框架构成,什么对应什么,其次是名称要熟练记忆,一般而言都是所见即所得,名字很有规律.最后是多练,在练习中逐渐掌握这些规则.

  • setTimeout内不支持jquery的选择器的解决方案

    今天在写一个js延时事件的时候发现在setTimeout这个方法里面使用jquery的$(this)竟然不起作用,各种测试,最后得出结论是setTimeout内不支持jquery的选择器.于是请教了一下QQ上做jquery开发的高手,马上就把这问题解决了,在这里记录一下. 下面是作者做延时处理时的js代码: $('.dl_select dt').hover( function(){ clearTimeout(t3); $(this).siblings('dd').css({'display':'

  • 关于setInterval、setTimeout在jQuery中的使用注意事项

    以前写定时器的时候,总是习惯直接 setInterval("fn()",2000); 最近碰到个问题,在使用jquery写定时器时,总是会出现fn不存在的错误提示,如下 $(function(){setInterval("fn()",2000);}) 解决方法是去掉引号和括号,采用最原始的方法 $(function(){setInterval(fn,2000);}) 另外一种就是在书写jq的扩展,如下 复制代码 代码如下: $(function(){ $.exten

  • Jquery中使用setInterval和setTimeout的方法

    方法1. 应用jQuery的扩展可以解决这个问题. 复制代码 代码如下: $(document).ready(function(){$.extend({  show:function(){   alert("ready");  }});setInterval("show()",3000);}); 方法2. 指定定时执行的函数时不要使用引号和括号. 复制代码 代码如下: $(function(){function show(){   alert("ready

  • jQuery setTimeout传递字符串参数报错的解决方法

    当你打算调用一些jQuery代码显示隐藏的一个元素,并调用setTimeout()在一段延时之后设置其HTML的内容: 整个页面的代码是这样的. 复制代码 代码如下: <span style="font-size:18px;"><html> <head> <title></title> </head> <body> <a href="#" id='heihei' onclick

  • jQuery中setTimeout的几种使用方法小结

    我们通过例子来说明一下jQuery中setTimeout的几种使用方法, 首先准备好测试用的DIV和公共函数: 复制代码 代码如下: <div id="div_debug"></div> <script src="http://www.studyday.net/demo/jquery.js"></script>  <script language="JavaScript">  funct

  • jquery中的常见问题及快速解决方法小结

    1 在开发开放聊天室的过程中,遇到使用ajax提交表单插入数据库时会插入两条数据的情况 解决办法,在ajax函数返回后,return false. $("#btn").click(function(){ $.ajax({ do something }); return false; }) 2 去除选中元素的某一个属性使用removeattr 3 javascript中与时间相关的函数有setInterval("function",millisec[,"la

  • Python中浅拷贝的四种实现方法小结

    目录 方式一:使用切片 [:] 方式二:使用工厂函数 方式三:使用数据类型自带的 copy 方法 方式四:使用 copy 模块的 copy 方法 方式一:使用切片 [:] 列表 # 浅拷贝 [:] old_list = [1, 2, [3, 4]] new_list = old_list[:] old_list.append(5) old_list[2][0] += 97 print("Old list:", old_list, "old list id:", id

  • jQuery中的deferred对象和extend方法详解

    1 deferred对象 deferred对象是jQuery的回调函数解决方案,它是从jQuery1.5.0版本开始引入的功能 deferred对象的方法 (1) $.Deferred() 生成一个deferred对象. (2) deferred.done() 指定操作成功时的回调函数 (3) deferred.fail() 指定操作失败时的回调函数 (4) deferred.promise() 没有参数时,返回一个新的deferred对象,该对象的运行状态无法被改变:接受参数时,作用为在参数对

  • jQuery prototype冲突的2种解决方法(附demo示例下载)

    本文实例分析了jQuery prototype冲突的2种解决方法.分享给大家供大家参考,具体如下: jquery和prototype怎么会冲突,归根到底就是因为他们二个都用到了$,同时用,混淆了.这个问题解决过不下5次,每次解决都要查一下.淡疼,嘿嘿. 方法一.在jquery的核心库文件中加代码. 1.一般是jquery.js,或者jquery.min.js,有的带版本号的.知道是哪个文件就行. })( window ); jQuery.noConflict(); //最后面,加上这一行. 2.

  • jQuery中ajax的load()与post()方法实例详解

    本文实例讲述了jQuery中ajax的load()与post()方法.分享给大家供大家参考,具体如下: 一.load()方法 在jQuery ajax的load()方法能够载入远程 HTML 文件代码并插入至 DOM 中,这个与post,get还是有一点的区别,但可以快速在页面加载时就加载一个页面的html保存到dom中并且可执行哦. load()方法默认使用 GET 方式, 如果传递了data参数则使用Post方式. 传递附加参数时自动转换为 POST 方式.jQuery 1.2 中,可以指定

  • jQuery中animate的几种用法与注意事项

    jQuery中animate的几种用法与注意事项

    一.animate语法结构 animate(params,speed,callback) params:一个包含样式属性及值的映射,比如{key1:value1,key2:value2} speed:速度参数[可选] callback:在动画完成时执行的函数[可选] 二.自定义简单动画 用一个简单例子来说明,实现单击某div在页面上横向飘动的效果. <style> #cube{ position:relative;/* 不加这句元素不能动 */ width:30px; height:30px;

  • 快速掌握Node.js中setTimeout和setInterval的使用方法

    Node.js和js一样也有计时器,超时计时器.间隔计时器.及时计时器,它们以及process.nextTick(callback)函数来实现事件调度.今天先学下setTimeout和setInterval的使用. 一.setTimeout超时计时器(和GCD中的after类似) 在node.js中可以使用node.js内置的setTimeout(callback,delayMillSeconds,[args])方法.当调用setTime()时回调函数会在delayMillSeconds后 执行

  • jQuery中ajax的4种常用请求方式介绍

    AJAX 是一种与服务器交换数据的技术,可以在补充在整个页面的情况下更新网页的一部分. jQuery中ajax的4种常用请求方式: 1.$.ajax()返回其创建的 XMLHttpRequest 对象. $.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息.详细参数选项见下. 如果你指定了 dataType 选项,请确保服务器返回正确的 MIME 信息,(如 xml 返回 "text/xml"). 实例: 保存数据到服务器,成功时显示信息. $.aj

  • python中常用的九种预处理方法分享

    python中常用的九种预处理方法分享

    本文总结的是我们大家在python中常见的数据预处理方法,以下通过sklearn的preprocessing模块来介绍; 1. 标准化(Standardization or Mean Removal and Variance Scaling) 变换后各维特征有0均值,单位方差.也叫z-score规范化(零均值规范化).计算方式是将特征值减去均值,除以标准差. sklearn.preprocessing.scale(X) 一般会把train和test集放在一起做标准化,或者在train集上做标准化

随机推荐