85种网站常用JavaScript技巧

首页 > 代码库 > 85种网站常用JavaScript技巧

85种网站常用JavaScript技巧

2024-10-21 00:05:44 230人阅读

40+45种网站常用Javascript技巧转载自网络，地址不详。

1. oncontextmenu="window.event.returnValue=http://www.mamicode.com/false" 将彻底屏蔽鼠标右键

<table border oncontextmenu=return(false)><td>no</table> 可用于Table

2. <body onselectstart="return false"> 取消选取、防止复制

3. onpaste="return false" 不准粘贴

4. oncopy="return false;" oncut="return false;" 防止复制

5. <link rel="Shortcut Icon" href="http://www.mamicode.com/favicon.ico"> IE地址栏前换成自己的图标

6. <link rel="Bookmark" href="http://www.mamicode.com/favicon.ico"> 可以在收藏夹中显示出你的图标

7. <input style="ime-mode:disabled"> 关闭输入法

8. 永远都会带着框架

if (window == top)top.location.href = "http://www.mamicode.com/frames.htm"; //frames.htm为框架网页

// --></script>

9. 防止被人frame

<SCRIPT LANGUAGE=JAVASCRIPT><!--

if (top.location != self.location)top.location=self.location;

// --></SCRIPT>

10. 网页将不能被另存为

11. <input type=button value=http://www.mamicode.com/查看网页源代码

onclick="window.location = "view-source:"+ "http://www.williamlong.info"">

12.删除时确认

13. 取得控件的绝对位置

//Javascript

function getIE(e){

var t=e.offsetTop;

var l=e.offsetLeft;

while(e=e.offsetParent)

alert("top="+t+"/nleft="+l);

}

</script>

//VBScript

function getIE()

dim t,l,a,b

set a=document.all.img1

t=document.all.img1.offsetTop

l=document.all.img1.offsetLeft

while a.tagName<>"BODY"

set a = a.offsetParent

t=t+a.offsetTop

l=l+a.offsetLeft

wend

msgbox "top="&t&chr(13)&"left="&l,64,"得到控件的位置"

end function

--></script>

14. 光标是停在文本框文字的最后

function cc()

{

var e = event.srcElement;

var r =e.createTextRange();

r.moveStart("character",e.value.length);

r.collapse(true);

r.select();

}

</script>

15. 判断上一页的来源

javascript:

document.referrer

16. 最小化、最大化、关闭窗口

本例适用于IE

17.屏蔽功能键Shift,Alt,Ctrl

function look(){

if(event.shiftKey)

alert("禁止按Shift键!"); //可以换成ALT　CTRL

}

document.onkeydown=look;

</script>

18. 网页不会被缓存

或者<META HTTP-EQUIV="expires" CONTENT="0">

19.怎样让表单没有凹凸感？

或

<input type=text style="border-left:none; border-right:none; border-top:none; border-bottom:

1 solid #000000"></textarea>

20.<div><span>&<layer>的区别？

<div>(division)用来定义大段的页面元素，会产生转行

<span>用来定义同一行内的元素，跟<div>的唯一区别是不产生转行

<layer>是ns的标记，ie不支持，相当于<div>

21.让弹出窗口总是在最上面:

22.不要滚动条?

让竖条没有:

</body>

让横条没有:

</body>

两个都去掉？更简单了

</body>

23.怎样去掉图片链接点击后，图片周围的虚线？

24.电子邮件处理提交表单

</form>

25.在打开的子窗口刷新父窗口的代码里如何写？

window.opener.location.reload()

26.如何设定打开页面的大小

打开页面的位置<body onl oad="top.moveBy(300,200);">

27.在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动

<STYLE>

body

{background-image:url(/blog/logo.gif); background-repeat:no-repeat;

background-position:center;background-attachment: fixed}

</STYLE>

28. 检查一段字符串是否全由数字组成

function checkNum(str){return str.match(//D/)==null}

alert(checkNum("1232142141"))

alert(checkNum("123214214a1"))

// --></script>

29. 获得一个窗口的大小

document.body.clientWidth; document.body.clientHeight

30. 怎么判断是否是字符

if (/[^/x00-/xff]/g.test(s)) alert("含有汉字");

else alert("全是字符");

31.TEXTAREA自适应文字行数的多少

</textarea>

32. 日期减去天数等于第二个日期

function cc(dd,dadd)

{

//可以加上错误处理

var a = new Date(dd)

a = a.valueOf()

a = a - dadd * 24 * 60 * 60 * 1000

a = new Date(a)

alert(a.getFullYear() + "年" + (a.getMonth() + 1) + "月" + a.getDate() + "日")

}

cc("12/23/2002",2)

</script>

33. 选择了哪一个Radio

function checkme()

for each ob in radio1

if ob.checked then window.alert ob.value

end function

</script><BODY>

<INPUT name="radio1" type="radio" value="http://www.mamicode.com/style" checked>Style

<INPUT name="radio1" type="radio" value="http://www.mamicode.com/barcode">Barcode

</BODY></HTML>

34.脚本永不出错

<!-- Hide

function killErrors() {

return true;

}

window.onerror = killErrors;

// -->

</SCRIPT>

35.ENTER键可以让光标移到下一个输入框

36. 检测某个网站的链接速度：

把如下代码加入<body>区域中:

tim=1

setInterval("tim++",100)

b=1

var autourl=new Array()

autourl[1]="www.njcatv.NET"

autourl[2]="javacool.3322.net"

autourl[3]="www.sina.com.cn"

autourl[4]="www.nuaa.edu.cn"

autourl[5]="www.cctv.com"

function butt(){

document.write("<form name=autof>")

for(var i=1;i<autourl.length;i++)

document.write("<input type=text name=txt"+i+" size=10 value="http://www.mamicode.com/blog/测试中......>" =》<input type=text

name=url"+i+" size=40> =》<input type=button value=http://www.mamicode.com/Go

onclick=window.open(this.form.url"+i+".value)><br/>")

document.write("<input type=submit value=http://www.mamicode.com/刷新>")

}

butt()

function auto(url)

else

b++

}

function run(){for(var i=1;i<autourl.length;i++)document.write("<img src=http://"+autourl+"/"+Math.random()+" width=1 height=1

onerror=auto("http://"+autourl+"")>")}

run()</script>

37. 各种样式的光标

auto ：标准光标

default ：标准箭头

hand ：手形光标

wait ：等待光标

text ：I形光标

vertical-text ：水平I形光标

no-drop ：不可拖动光标

not-allowed ：无效光标

help ：?帮助光标

all-scroll ：三角方向标

move ：移动标

crosshair ：十字标

e-resize

n-resize

nw-resize

w-resize

s-resize

se-resize

sw-resize

38.页面进入和退出的特效

进入页面<meta http-equiv="Page-Enter" content="revealTrans(duration=x, transition=y)">

推出页面<meta http-equiv="Page-Exit" content="revealTrans(duration=x, transition=y)">

这个是页面被载入和调出时的一些特效。duration表示特效的持续时间，以秒为单位。transition表示使用哪种特效，取值为1-23:

　　0 矩形缩小

　　1 矩形扩大

　　2 圆形缩小

　　3 圆形扩大

　　4 下到上刷新

　　5 上到下刷新

　　6 左到右刷新

　　7 右到左刷新

　　8 竖百叶窗

　　9 横百叶窗

　　10 错位横百叶窗

　　11 错位竖百叶窗

　　12 点扩散

　　13 左右到中间刷新

　　14 中间到左右刷新

　　15 中间到上下

　　16 上下到中间

　　17 右下到左上

　　18 右上到左下

　　19 左上到右下

　　20 左下到右上

　　21 横条

　　22 竖条

　　23 以上22种随机选择一种

39.在规定时间内跳转

40.网页是否被检索

　　其中属性值有以下一些:

　　属性值为"all": 文件将被检索，且页上链接可被查询；

　　属性值为"none": 文件不被检索，而且不查询页上的链接；

　　属性值为"index": 文件将被检索；

　　属性值为"follow": 查询页上的链接；

　　属性值为"noindex": 文件不检索，但可被查询链接；

　　属性值为"nofollow": 文件不被检索，但可查询页上的链接。

最大化窗口？

<!--

self.moveTo(0,0)

self.resizeTo(screen.availWidth,screen.availHeight)

//-->

</script>

解决问题：由于层与下拉框之间的优先级是：下拉框 > 层，因此在显示的时候，会因为优先级的次序而会出现如上问题。（如果几个元素都是层的话，我们可以通过层的 z-index 属性来设置）解决办法就是：给层中放一个优先级比下拉框更高的元素（iframe），从而解决此问题！具体解决代码如下：

<table>

</table>

</div>

<form>

<select><option>A form selection list</option></select>

</form>

输入框也可以做的很漂亮了

外向数：<input

name=answer

style="color: rgb(255,0,0); border-left: medium none; border-right: medium none; border-top: medium none; border-bottom: 1px solid rgb(192,192,192)">

　没回答的题数：<input

name=unanswer id="unanswer"

style="color: rgb(255,0,0); border-left: medium none; border-right: medium none; border-top: medium none; border-bottom: 1px solid rgb(192,192,192)">

<br/>

总得分:

<input

name=score id="score"

style="color: rgb(255,0,0); border-left: medium none; border-right: medium none; border-top: medium none; border-bottom: 1px solid rgb(192,192,192)">

　结　　　　论:

<input

name=xgjg id="xgjg"

style="color: rgb(255,0,0); border-left: medium none; border-right: medium none; border-top: medium none; border-bottom: 1px solid rgb(192,192,192)">

<br/>

</div>

注意：修改<body>为<body onl oad="max.Click()">即为打开最大

化窗口，而如果改为<body onl oad="min.Click()">就变为窗口一打开就最小化

</object> <object id="max" type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">

</object>

</body>

页面自动刷新（说明）

当你做网页时，是不是有的时候想让你的网页自动不停刷新，或者过一段时间自动跳转到另外一个你自己设定的页面？其实实现这个效果非常地简单，而且这个效果甚至不能称之为特效。你只要把如下代码加入你的网页中就可以了。

1，页面自动刷新：把如下代码加入<head>区域中<meta http-equiv="refresh" content="20">,其中20指每隔20秒刷新一次页面.

2，页面自动跳转：把如下代码加入<head>区域中<meta http-equiv="refresh" content="20;url=http://www.williamlong.info">,其中20指隔20秒后跳转到http: //www.williamlong.info页面。

页面自动关闭

5000是指时间<body onl oad="setTimeout(window.close, 5000)">

弹出窗口自动关闭

10秒后弹出窗口自动关闭

注意：在新的tan.htm的body中要加 <onLoad="closeit()">

head

<!--

var gt = unescape(‘%3e‘);

var popup = null;

var over = "Launch Pop-up Navigator";

popup = window.open(‘‘, ‘popupnav‘, ‘width=225,height=235,resizable=1,scrollbars=auto‘);

if (popup != null) {

if (popup.opener == null) {

popup.opener = self;

}

popup.location.href = http://www.mamicode.com/‘tan.htm‘;

}

// -->

</script>

<body>注意：这段代码是在新建文件中的

function closeit()

</script>

这个可不是<iframe>(引用）呀。是直接调用的。以下代码加入<body>区域

</object>

1 – 在第一次给一个变量赋值的时候不要忘记使用var关键字

给一个未定义的变量赋值会导致创建一个全局变量。要避免全局变量。

2 – 使用===，而不是＝＝

==（或!=）操作符在需要的时候会自动执行类型转换。===（或!==）操作不会执行任何转换。它将比较值和类型，而且在速度上也被认为优于==。

[10] === 10 // is false

[10] == 10 // is true

'10' == 10 // is true

'10' === 10 // is false

[] == 0 // is true

[] === 0 // is false

'' == false // is true but true == "a" is false

'' === false // is false

3 – 使用闭包实现私有变量（译者添加）

function Person(name, age) {

this.getName = function() { return name; };

this.setName = function(newName) { name = newName; };

this.getAge = function() { return age; };

this.setAge = function(newAge) { age = newAge; };

//未在构造函数中初始化的属性

var occupation;

this.getOccupation = function() { return occupation; };

this.setOccupation = function(newOcc) { occupation =

newOcc; };

}

4 – 在语句结尾处使用分号

在语句结尾处使用分号是一个很好的实践。如果你忘记写了你也不会被警告，因为多数情况下JavaScript解释器会帮你加上分号。

5 – 创建对象的构造函数

function Person(firstName, lastName){

this.firstName = firstName;

this.lastName = lastName;

}

var Saad = new Person("Saad", "Mousliki");

6 – 小心使用typeof、instanceof和constructor

var arr = ["a", "b", "c"];

typeof arr; // return "object"

arr instanceof Array // true

arr.constructor(); //[]

7 – 创建一个自调用函数（Self-calling Funtion）

这个经常被称为自调用匿名函数（Self-Invoked Anonymous Function）或者即时调用函数表达式（IIFE-Immediately Invoked Function Expression)。这是一个在创建后立即自动执行的函数，通常如下：

(function(){

// some private code that will be executed automatically

})();

(function(a,b){

var result = a+b;

return result;

})(10,20)

8- 从数组中获取一个随机项

var items = [12, 548 , 'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' , 2145 , 119];

var randomItem = items[Math.floor(Math.random() * items.length)];

9 – 在特定范围内获取一个随机数

这个代码片段在你想要生成测试数据的时候非常有用，比如一个在最小最大值之间的一个随机薪水值。

1	var x = Math.floor(Math.random() * (max - min + 1)) + min;

10 – 在0和设定的最大值之间生成一个数字数组

var numbersArray = [] , max = 100;

for( var i=1; numbersArray.push(i++) < max;); // numbers = [0,1,2,3 ... 100]

11 – 生成一个随机的数字字母字符串

function generateRandomAlphaNum(len) {

var rdmstring = "";

for( ; rdmString.length &lt; len; rdmString += Math.random().toString(36).substr(2));

return rdmString.substr(0, len);

}

【译者注：特意查了一下Math.random()生成0到1之间的随机数，number.toString(36)是将这个数字转换成36进制（0-9，a-z），最后substr去掉前面的“0.”字符串】

12 – 打乱一个数字数组

var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];

numbers = numbers.sort(function(){ return Math.random() - 0.5});

/* the array numbers will be equal for example to [120, 5, 228, -215, 400, 458, -85411, 122205] */

13 – String的trim函数

在Java、C#、PHP和很多其他语言中都有一个经典的 trim 函数，用来去除字符串中的空格符，而在JavaScript中并没有，所以我们需要在String对象上加上这个函数。

1	String.prototype.trim = function(){return this.replace(/^\s+\|\s+$/g, "");};

【译者注：去掉字符串的前后空格，不包括字符串内部空格】

14 – 附加（append）一个数组到另一个数组上

var array1 = [12 , "foo" , {name: "Joe"} , -2458];

var array2 = ["Doe" , 555 , 100];

Array.prototype.push.apply(array1, array2);

/* array1 will be equal to [12 , "foo" , {name "Joe"} , -2458 , "Doe" , 555 , 100] */

【译者注：其实concat可以直接实现两个数组的连接，但是它的返回值是一个新的数组。这里是直接改变array1】

15 – 将arguments对象转换成一个数组

1	var argArray = Array.prototype.slice.call(arguments);

【译者注：arguments对象是一个类数组对象，但不是一个真正的数组】

16 – 验证参数是否是数字（number）

function isNumber(n){

return !isNaN(parseFloat(n)) && isFinite(n);

}

17 – 验证参数是否是数组

function isArray(obj){

return Object.prototype.toString.call(obj) === '[object Array]' ;

}

注意：如果toString()方法被重写了（overridden），你使用这个技巧就不能得到想要的结果了。或者你可以使用：

1	Array.isArray(obj); // 这是一个新的array的方法

如果你不在使用多重frames的情况下，你还可以使用 instanceof 方法。但如果你有多个上下文，你就会得到错误的结果。

var myFrame = document.createElement('iframe');

document.body.appendChild(myFrame);

var myArray = window.frames[window.frames.length-1].Array;

var arr = new myArray(a,b,10); // [a,b,10]

// instanceof will not work correctly, myArray loses his constructor

// constructor is not shared between frames

arr instanceof Array; // false

【译者注：关于如何判断数组网上有不少讨论，大家可以google一下。这篇就写的挺详细的。】

18 – 获取一个数字数组中的最大值或最小值

var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];

var maxInNumbers = Math.max.apply(Math, numbers);

var minInNumbers = Math.min.apply(Math, numbers);

【译者注：这里使用了Function.prototype.apply方法传递参数的技巧】

19 – 清空一个数组

1 2	var myArray = [12 , 222 , 1000 ]; myArray.length = 0; // myArray will be equal to [].

20 – 不要使用 delete 来删除一个数组中的项。

使用 splice 而不要使用 delete 来删除数组中的某个项。使用 delete 只是用 undefined 来替换掉原有的项，并不是真正的从数组中删除。

不要使用这种方式：

var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ];

items.length; // return 11

delete items[3]; // return true

items.length; // return 11

/* items will be equal to [12, 548, "a", undefined × 1, 5478, "foo", 8852, undefined × 1, "Doe", 2154, 119] */

而使用：

var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ];

items.length; // return 11

items.splice(3,1) ;

items.length; // return 10

/* items will be equal to [12, 548, "a", 5478, "foo", 8852, undefined × 1, "Doe", 2154, 119] */

delete 方法应该被用来删除一个对象的某个属性。

21 – 使用 length 来截短一个数组

跟上面的清空数组的方式类似，我们使用 length 属性来截短一个数组。

1 2	var myArray = [12 , 222 , 1000 , 124 , 98 , 10 ]; myArray.length = 4; // myArray will be equal to [12 , 222 , 1000 , 124].

此外，如果你将一个数组的 length 设置成一个比现在大的值，那么这个数组的长度就会被改变，会增加新的 undefined 的项补上。数组的 length 不是一个只读属性。

1 2	myArray.length = 10; // the new array length is 10 myArray[myArray.length - 1] ; // undefined

22 – 使用逻辑 AND/OR 做条件判断

var foo = 10;

foo == 10 && doSomething(); // 等价于 if (foo == 10) doSomething();

foo == 5 || doSomething(); // 等价于 if (foo != 5) doSomething();

逻辑 AND 还可以被使用来为函数参数设置默认值

function doSomething(arg1){

Arg1 = arg1 || 10; // 如果arg1没有被设置的话，Arg1将被默认设成10

}

23 – 使用 map() 方法来遍历一个数组里的项

var squares = [1,2,3,4].map(function (val) {

return val * val;

});

// squares will be equal to [1, 4, 9, 16]

24 – 四舍五入一个数字，保留N位小数

1 2	var num =2.443242342; num = num.toFixed(4); // num will be equal to 2.4432

25 – 浮点数问题

0.1 + 0.2 === 0.3 // is false

9007199254740992 + 1 // is equal to 9007199254740992

9007199254740992 + 2 // is equal to 9007199254740994

为什么会这样？ 0.1+0.2等于0.30000000000000004。你要知道，所有的JavaScript数字在内部都是以64位二进制表示的浮点数，符合IEEE 754标准。更多的介绍，可以阅读这篇博文。你可以使用 toFixed() 和 toPrecision() 方法解决这个问题。

26 – 使用for-in遍历一个对象内部属性的时候注意检查属性

下面的代码片段能够避免在遍历一个对象属性的时候访问原型的属性

for (var name in object) {

if (object.hasOwnProperty(name)) {

// do something with name

}

27 – 逗号操作符

var a = 0;

var b = ( a++, 99 );

console.log(a); // a will be equal to 1

console.log(b); // b is equal to 99

28 – 缓存需要计算和查询（calculation or querying）的变量

对于jQuery选择器，我们最好缓存这些DOM元素。

var navright = document.querySelector('#right');

var navleft = document.querySelector('#left');

var navup = document.querySelector('#up');

var navdown = document.querySelector('#down');

29 – 在调用 isFinite()之前验证参数

isFinite(0/0) ; // false

isFinite("foo"); // false

isFinite("10"); // true

isFinite(10); // true

isFinite(undifined); // false

isFinite(); // false

isFinite(null); // true !!!

30 – 避免数组中的负数索引（negative indexes）

var numbersArray = [1,2,3,4,5];

var from = numbersArray.indexOf("foo") ; // from is equal to -1

numbersArray.splice(from,2); // will return [5]

确保调用 indexOf 时的参数不是负数。

31 – 基于JSON的序列化和反序列化（serialization and deserialization）

var person = {name :'Saad', age : 26, department : {ID : 15, name : "R&D"} };

var stringFromPerson = JSON.stringify(person);

/* stringFromPerson is equal to "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}" */

var personFromString = JSON.parse(stringFromPerson);

/* personFromString is equal to person object */

32 – 避免使用 eval() 和 Function 构造函数

使用 eval 和 Function 构造函数是非常昂贵的操作，因为每次他们都会调用脚本引擎将源代码转换成可执行代码。

1 2	var func1 = new Function(functionCode); var func2 = eval(functionCode);

33 – 避免使用 with()

使用 with() 会插入一个全局变量。因此，同名的变量会被覆盖值而引起不必要的麻烦。

34 – 避免使用 for-in 来遍历一个数组

避免使用这样的方式：

var sum = 0;

for (var i in arrayNumbers) {

sum += arrayNumbers[i];

}

更好的方式是：

var sum = 0;

for (var i = 0, len = arrayNumbers.length; i < len; i++) {

sum += arrayNumbers[i];

}

附加的好处是，i 和 len 两个变量的取值都只执行了一次，会比下面的方式更高效：

1	for (var i = 0; i < arrayNumbers.length; i++)

为什么？因为arrayNumbers.length每次循环的时候都会被计算。

35 – 在调用 setTimeout() 和 setInterval() 的时候传入函数，而不是字符串。

如果你将字符串传递给 setTimeout() 或者 setInterval()，这个字符串将被如使用 eval 一样被解析，这个是非常耗时的。
不要使用：

1 2	setInterval('doSomethingPeriodically()', 1000); setTimeOut('doSomethingAfterFiveSeconds()', 5000)

而用：

1 2	setInterval(doSomethingPeriodically, 1000); setTimeOut(doSomethingAfterFiveSeconds, 5000);

36 – 使用 switch/case 语句，而不是一长串的 if/else

在判断情况大于2种的时候，使用 switch/case 更高效，而且更优雅（更易于组织代码）。但在判断的情况超过10种的时候不要使用 switch/case。
【译者注：查了一下文献，大家可以看一下这篇介绍】

37 – 在判断数值范围时使用 switch/case

在下面的这种情况，使用 switch/case 判断数值范围的时候是合理的：

function getCategory(age) {

var category = "";

switch (true) {

case isNaN(age):

category = "not an age";

break;

case (age >= 50):

category = "Old";

break;

case (age <= 20):

category = "Baby";

break;

default:

category = "Young";

break;

};

return category;

}

getCategory(5); // will return "Baby"

【译者注：一般对于数值范围的判断，用 if/else 会比较合适。 switch/case 更适合对确定数值的判断】

38 – 为创建的对象指定prototype对象

写一个函数来创建一个以指定参数作为prototype的对象是有可能：

function clone(object) {

function OneShotConstructor(){};

OneShotConstructor.prototype= object;

return new OneShotConstructor();

}

clone(Array).prototype ; // []

39 – 一个HTML转义函数

function escapeHTML(text) {

var replacements= {"<": "<", ">": ">","&": "&", "\"": """};

return text.replace(/[<>&"]/g, function(character) {

return replacements[character];

});

}

40 – 避免在循环内部使用 try-catch-finally

在运行时，每次当 catch 从句被执行的时候，被捕获的异常对象会赋值给一个变量，而在 try-catch-finally 结构中，每次都会新建这个变量。

避免这样的写法：

var object = ['foo', 'bar'], i;

for (i = 0, len = object.length; i <len; i++) {

try {

// do something that throws an exception

}

catch (e) {

// handle exception

}

而使用：

var object = ['foo', 'bar'], i;

try {

for (i = 0, len = object.length; i <len; i++) {

// do something that throws an exception

}

catch (e) {

// handle exception

}

41 – 为 XMLHttpRequests 设置超时。

在一个XHR请求占用很长时间后（比如由于网络问题），你可能需要中止这次请求，那么你可以对XHR调用配套使用 setTimeout()。

var xhr = new XMLHttpRequest ();

xhr.onreadystatechange = function () {

if (this.readyState == 4) {

clearTimeout(timeout);

// do something with response data

}

var timeout = setTimeout( function () {

xhr.abort(); // call error callback

}, 60*1000 /* timeout after a minute */ );

xhr.open('GET', url, true);

xhr.send();

此外，一般你应该完全避免同步的Ajax请求。

42 – 处理WebSocket超时

通常，在一个WebSocket连接创建之后，如果你没有活动的话，服务器会在30秒之后断开（time out）你的连接。防火墙也会在一段时间不活动之后断开连接。

为了防止超时的问题，你可能需要间歇性地向服务器端发送空消息。要这样做的话，你可以在你的代码里添加下面的两个函数：一个用来保持连接，另一个用来取消连接的保持。通过这个技巧，你可以控制超时的问题。

使用一个 timerID：

var timerID = 0;

function keepAlive() {

var timeout = 15000;

if (webSocket.readyState == webSocket.OPEN) {

webSocket.send('');

}

timerId = setTimeout(keepAlive, timeout);

}

function cancelKeepAlive() {

if (timerId) {

cancelTimeout(timerId);

}

keepAlive()方法应该被添加在webSOcket连接的 onOpen() 方法的最后，而 cancelKeepAlive() 添加在 onClose() 方法的最后。

43 – 牢记，原始运算符始终比函数调用要高效。使用VanillaJS。

举例来说，不使用：

1 2	var min = Math.min(a,b); A.push(v);

而用：

1 2	var min = a < b ? a b; A[A.length] = v;

44 – 编码的时候不要忘记使用代码整洁工具。在上线之前使用JSLint和代码压缩工具（minification）（比如JSMin）。《省时利器：代码美化与格式化工具》

85种网站常用JavaScript技巧

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > 85种网站常用JavaScript技巧

85种网站常用JavaScript技巧

看完仍有疑问？有类似问题直接问程序猿