易栈网-膘叔（Neatstudio.COM）

浏览模式: 标准 | 列表分类:Javascript

setInterval和setTimeout到底有啥区别？

Submitted by gouki on 2010, March 17, 11:29 AM

对于javascript的setInterval和setTimeout，很多人到现在一直搞不清楚。其实，真的很简单，也很方便的就能让人搞清楚在什么时候用什么函数。

当然我说的是简单的方法，请打开词霸，查看interval和timeout，就可以明白很多了

interval: n. 间隔；幕间休息；间距

timeout: n. 暂时休息；工间休息；超时

看到这两个意思，估计你也可以明白，setTimeout是在超过你定义的时间后，执行。而setInterval是间隔你定义时间区间执行函数。这样解释就让你明白很多了吧？

以前写的：

[2009-05-07] - Tutorial: JavaScript timers with setTimeout and setInterval
[2009-05-06] - setInterval 的郁闷之处

之所以写这篇文章，主要是因为看了http://www.phpweblog.net/jig68/archive/2010/03/17/7137.html这篇博客。才明白还是有很多人不太了解这方面，所以，换个简单的解释方法，总可以让人明白了吧？
PS:意外啊，一不小心多复制了点代码。。。

Tags: setinterval, settimeout

Javascript | 评论:0 | 阅读:16020

Javascript：不要将属性写在prototype里

Submitted by gouki on 2010, March 16, 1:50 PM

没有仔细研究过，但觉得得这就象PHP的类（Class）的复制和引用的关系。好象差不多。

原文来自：http://www.beiju123.cn/blog/?p=304

年前,某次分享会上听玉伯偶然说了这句话,当时糊里糊涂,不明所以,偶然有一天我做一个东西,发现某个对象的实例之间竟然会互相操作了定义在 prototype里的属性,于是我验证了下:

JavaScript代码

var objA=function(){
}
objA.prototype={
name:{},
setName:function(str){
this.name=str;
},
getName:function(){
return this.name;
}
}
var a=new objA();
var b=new objA();
//a.name={firstname:"孙",fathername:"信宇"};//undefined
a.name.firstname="孙";//弹出sun
alert(b.name.firstname);

在这个例子里,当我修改实例a的name属性的时候,实例b的name属性页跟着变了,而且说明他们引用了同一份对象.

如果name属性是值类型,例如字符串,就不会与这种问题了,那是因为字符串每次被操作都返回新实例,当然反映不出冲突来了.
那为什么会出现这种冲突呢?
专业术语我不太会讲,但是prototype这种原型继承的好处其实就是节省程序运行空间,当你从objA实例化两个实例:a和b时,并不会创建两份属性和方法,而是把他们都指向一份属性和方法,所以prototype里的所有的东西都被所有的实例共享,实例中保存的只是一个json索引.
正因为如此,如果整个改变name的值的话,让他指向别的对象,这样就不会互相影响了,而且对于值类型来说,本质就是每次操作都会返回新的实例,所以不会出现冲突.
对于这种冲突来说,最好的解决办法就是将属性从prototype里移出来,写在构造函数里:

JavaScript代码

var objA=function(){
this.name={}
}
objA.prototype={
setName:function(str){
this.name=str;
},
getName:function(){
return this.name;
}
}

这样再试一次就会发现,每次创建实例都会创建一个新的name属性对象,而不是指向同一个对象;
也可以在prototype理的init方法里用this.name={}来初始化配置参数,属性等内容,反正就是不能写在prototype里面.但是可以在函数里初始化定义.

还有一点要注意:我个人认为,js里所有的东西都是对象,包括值类型,他们之所以表现出非引用类型的性质,是因为每次对这些对象操作都会返回新的实例,这只是一种假象,事实上可以说,js里所有的东西都是引用类型,只是值类型在被操作时引用总是被改变,表面上来看就是非引用类型了.

--EOF--

即使是上面的情况，我还是认为可以看看

http://lifesinger.org/blog/2009/01/javascript-run-mechanism/

http://www.cnblogs.com/rainman/archive/2009/04/28/1445687.html

Javascript | 评论:0 | 阅读:17004

带动画的GIF图片在IE中不能正常工作

Submitted by gouki on 2010, March 15, 9:32 PM

这个问题，怎么说呢，先把症状重复一遍吧：IE显示了图片，但是动画却不能播放。而在FirFox中却能正常的工作。
一直以来，我都以为是浏览器的关系。没有设定好而导致这种情况发生，比如一些在IE核心上开发的浏览器（maxthon）等，都可以把GIF动画关闭的。所以我也就没有仔细研究过。

来看看这个：
IE和FirFox在很多地方都有着或多或少的不同，这导致在开发时需要考虑很多的特殊情况。在最近的项目中居然发现带动画的GIF图片在页面Load之后再以脚本控制的方式展现时，动画不能表现出来。在我的项目中，需要在点击一个按钮后来显示一个动态的Loading图片以此表示程序正在进行后台处理。这是通过一段jQuery代码来实现的：

XML/HTML代码

<font size="3" face="Calibri"><script language="javascript" type="text/javascript">function showMessage() {
......
$("div#Processing").show();
......
}</script>
<div id="Processing" style="display: none">
<center>
<img src="placeOrder_processing.gif" />
</center>
</div></font>

E显示了图片，但是动画却不能播放。而在FirFox中却能正常的工作。当你将整个DIV加入到DOM中时，这个DIV是隐藏的，不可见的。但是当你将其属性设置为可见时，动画却不能被正常播放。如果将带动画的GIF图片直接以可见的形式加入到DOM中，它是可以正确的现实并播放动画的。那么，可以这样更改代码：

XML/HTML代码

<font size="3" face="Calibri"><script language="javascript" type="text/javascript">
function showMessage() {
$("div#Processing").show();
var imgSrc = '<%=ResolveUrl("~/Images/Checkout/placeOrder_processing.gif") %>';
$("td#imgSection").append("<img src='" + imgSrc + "'/>");
}
</script></font>

这样，在可见的内容中将Img加入到DOM中就可以解决这个问题了。 --EOF-- 贴出这个案例地址是在：http://www.cnblogs.com/zlgcool/archive/2010/03/15/1686507.html，真的很意外的例子，所以就记录下来了

Javascript | 评论:2 | 阅读:16868

jQuery写的tab切换

Submitted by gouki on 2010, March 4, 9:58 AM

花了半小时左右写了这个小东西。没有封装成插件。因为我觉得性能不好。主要就是想试一下$('xxx').data()这个方法。
在页面不大的时候，其实真的可以用这个方法来缓存ajax的数据。

JavaScript代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="http://localhost/jquery.js"></script>
<style>
.mytab{border:1px solid #888;cursor:pointer;}
.showdiv{border:1px solid #888;cursor:pointer;}
</style>
</head>
<body>
<div>
<span class="mytab">Tab1</span>
<span class="mytab">Tab2</span>
</div>
<div id='tab-1' style="display:none" rel="http://localhost/test.php" class="showdiv">
</div>
<div id='tab-2' style="display:none" class="showdiv">
ddssasdflkjasdflkjalsdkfj
</div>
<input type='button' value="click" id='clickid'>
<script language="JavaScript">
<!--
$(document).ready(function(){
$('body').append("<div id='testData' />");
$('.mytab').each(function(i){
$(this).click(function(){
var j = i+1;
var id = 'tab-' + j;
var src = $('#'+id).attr('rel');
if( src ){
if($('testData').data('data_'+id)){
return ;
}else{
$.get( src ,function(data){
if(data){
$('testData').data('data_'+id,data);
$('#'+id).html(data);
}
});
}
}
var len = $('.mytab').length;
for (var s=1;s<=len ; s++){
s == j ? $('#'+id).show() : $('#tab-'+s).hide();
}
});
});
});
//-->
</script>
</body>
</html>