setTimeout and jquery
setTimeout(以及setInterval)必须被告知延时后要做什么,而且只有三种方式来告知它:
1.用一个必须编译的js的字符串
setTimeout('$("#loading").fadeIn("slow")',9999);
因为它通过编译会变得相当难看,并不推荐. 不过却很管用.
2.带上一个变量参数
var test =function(){ $('#loading').fadeIn('slow');};
setTimeout(test,9999);
注意我们不用setTimeout(test(), 9999)
. 只用这个函数的名称.
3.用匿名函数,你自己构建的,就像我之前在第一个代码块中做的那样.
如果你试图执行类似setTimeout(test(), 9999)
, 那么浏览器会首先执行test()
, 再返回值给setTimeout
.
所以当你试图...
setTimeout($('#loading').fadeIn('slow'),9999);
...浏览器执行jquery语句, fading in the #loading
元素, 然后将无论什么 fadeIn
都返回给setTimeout
. 正如它产生的结果, fadeIn
函数返回一个jquery对象. 但是setTimeout不知道如何处理对象, 所以在9999毫秒后什么结果都不会发生.
原文:
http://stackoverflow.com/questions/7085925/jquery-and-settimeout
In order to do what you want, you have to wrap the jQuery stuff in an anonymous function:
setTimeout(function(){ $('#loading').fadeIn('slow');},9999);
The setTimeout
function (and setInterval
as well) must be told what to do after the delay. And there are only three ways to tell it what to do:
With a string of JavaScript that it must
eval
:setTimeout('$("#loading").fadeIn("slow")',9999);
Because this uses
eval
, and can get pretty ugly, it's not recommended. But it works fine.With a function reference:
var test =function(){ $('#loading').fadeIn('slow');}; setTimeout(test,9999);
Note that I didn't do
setTimeout(test(), 9999)
. I just gave it the name of the function.With an anonymous function that you construct on the fly, which is what I did in the first code block above.
If you try to do something like setTimeout(test(), 9999)
, then the browser will first executetest()
, and then give the return value to setTimeout
. So in your attempt...
setTimeout($('#loading').fadeIn('slow'),9999);
...the browser was executing that jQuery stuff, fading in the #loading
element, and then giving whatever fadeIn
returns to setTimeout
. As it happens, the fadeIn
function returns a jQuery object. But setTimeout doesn't know what to do with objects, so nothing would happen after the 9999 millisecond delay.
/*** 解决方案: ***/
You can also use jQuery's .delay(). (可用一下jquery方法来达到延时目的)
$('#loading').delay(9999).fadeIn('slow');
<!------------or--------------->
setTimeout
accepts a function as first parameter - you are currently passing a jQuery selector, which immediately gets evaluated which executes the fadeIn
operation. Instead pass in an anonymous function: (setTimeout接受用一个函数作为第一个属性 - 你现在通过一个jquery选择器, 它立即编译后 执行 fadeIn
的操作. 代替入匿名函数)
setTimeout(function(){ $('#loading').fadeIn('slow'),9999);},9999);
<!------------over GOOD--------------->
其他参考:
http://www.studyday.net/2011/01/177
转载于:https://www.cnblogs.com/lucoy/archive/2012/04/11/2443129.html
setTimeout and jquery相关推荐
- jQuery中的队列是什么?
我发现queue() / dequeue()上的jQuery.com文档太简单了. jQuery中的队列到底是什么? 我应该如何使用它们? #1楼 它允许您将动画排队...例如,代替此 $('#my- ...
- 在JavaScript控制台中包含jQuery
对于不使用jQuery的网站,是否有简便的方法将jQuery包含在Chrome JavaScript控制台中? 例如,在一个网站上,我想获取表中的行数. 我知道使用jQuery确实很容易. $('el ...
- php延时5秒显示,JS/jQuery实现DIV延时几秒后消失或显示
本文主要和大家介绍了JS/jQuery实现p延时几秒后消失或显示的方法,结合实例形式分析了javascript使用setTimeout及jQuery使用delay方法实现延迟显示功能的相关操作技巧,需 ...
- 遇到jQuery 中的 slideUp ,slideToggle和 slideDown 动画重复执行
说明 jQuery 可以通过调用 animate 方法添加动画效果, 而且还提供了一套别名, 使用起来很是方便. 其中 slideDown和 slideUp 两方法的作用是纵向展开和卷起一个页面元素, ...
- jQuery——实现一个3D动态轮播图
先看效果图(挺好看的小妹妹,制作完gif图就这么丑了): css代码: <!DOCTYPE html> <html lang="en"> <head& ...
- php延时5秒显示,在JS/jQuery中如何实现DIV延时几秒后消失或显示
这篇文章主要介绍了JS/jQuery实现p延时几秒后消失或显示的方法,结合实例形式分析了javascript使用setTimeout及jQuery使用delay方法实现延迟显示功能的相关操作技巧,需要 ...
- javascript 异步实现方案
1.回调函数 fn1( fn2 ); 2.事件监听 fn1.on('done', fn2);function fn1() {setTimeout(function(){fn1.trigger('don ...
- JavaScript 教程(二)
面向对象编程 实例对象与 new 命令 JavaScript 语言具有很强的面向对象编程能力,这里介绍 JavaScript 面向对象编程的基础知识 对象是什么 面向对象编程(Object Orien ...
- JavaScript文档
开始学习javaScript的小伙伴们,或者是正用到javaScipt的小猿们,都可以将它作为资料参考,基本知识还是很全的以及简单应用:黄色标出的是关键的知识点及解说,可以以它为节点快速找到自己想要知 ...
最新文章
- python3 graphviz入门教程
- 【IOC 控制反转】Android 事件依赖注入 ( 事件三要素 | 修饰注解的注解 | 事件依赖注入步骤 )
- acm java_ACM Java Native SDK 概述
- Java使用预定格式获取时间字符串
- 【ML】Principle Component Analysis 主成分分析
- 神经网络训练中,错误数据集对模型结果的影响有多大
- demod函数_MATLAB信号处理工具箱函数 | 学步园
- linux+++乘法口诀_Shell的九九乘法口诀
- Linux系统网卡配置方法
- #0 scrapy爬虫学习中遇到的坑记录
- 基于位置的知识图谱链接预测
- long类型20位示例_Java Long类numberOfTrailingZeros()方法及示例
- vue项目模板_VSCode( VisualStudioCode) 写vue项目一键生成.vue模版修改定义其他模板
- jquery radio,select相关操作
- 【转载】使用微博API接口获取数据
- f-stack 编译测试笔记
- 生物医学信号检测与处理实验3——1微电阻梁
- JLink OB STM32F072 固件的过程
- visio画图复制粘贴到word_VISO复制到WORD中全是空白框
- 晶体管介绍工作原理与历史
热门文章
- 设备树与驱动的关系_Linux CommonClock Framework分析之四 gpio clk gate驱动实现
- 修改oracle数据连接数据库,修改Oracle数据库的连接数
- Surface Computing
- CODEVS-1082-线段树练习3-splay
- BZOJ-几道比较有趣的题目
- [BZOJ 1001] 狼抓兔子
- uvalive5986(贪心)
- 数字三角形:顺推法(二维数组)
- NOIP2016普及组第三题——海港
- ASP.NET Core Identity自定义数据库结构和完全使用Dapper而非EntityFramework Core