— Designsor

Archive
Tag "apply"

在twitter上看到一篇比较好的推荐文章,至少我感觉又学到了东西,特别拿出来翻译和分享一下。

原文地址:http://javascript.feederss.com/post/2442.html

如果你做过用户文本框提交确认的功能,比如用到了onkeypress,那么你是否想过要减少你的检测函数的执行次数?举个最简单的例子,比如你要确认一个用户名是否存在,那么你可能并不想每次keypress都执行ajax异步检测,因为大多数的时候输入一个单词需要10分之一秒或者更久,那么你就需要控制你的ajax请求的间隔,而不是每次press之后都立刻去进行ajax请求,至少要在那10份之一秒钟让你的文本框处于休眠状态。

所以就会产生这么一个神奇的类似closure的一种javascript方案,下面是创建这个方法的一个简单的例子:

function throttle(fn, delay) {
var timer = null;
return function () {
var context = this, args = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
fn.apply(context, args);
}, delay);
};
}

如果你是在用jquery来工作的话,如果你要写一个keypress的检测,你可以像下面这样使用:

$(‘input.username’).keypress(throttle(function (event) {
// do the Ajax request
}, 250));

这里的关键词是this和那个args,this其实就是你预期的那个input,而args是传入的event对象,通过这个方法你就可以准确的控制你的ajax请求是press一次的之后250毫秒过后再次触发了。

大概就是这么一篇文章,但是我承认以前确实没有注意到过,关于那个throttle函数,我在firebug里检测了下,里面最不明白的其实就是那个this和args。通过断点我检测出来了,虽然他文章最后也告诉了。

恩,最后如果你不用jquery的话,原始的js如何使用这个函数呢?

document.getElementById(‘page’).onclick=throttle(function(e){
alert(e);
alert(’3000 later’);
},3000)

恩。。。就是这么简单……^_^

对了 这个文章的作者挺NB的,我也推荐订阅他的tw和rss……

Read More

啊,群里为了帮助我提高js水平,出了道比较考察基础的题目,他们说蝴蝶书里有答案,我确实忘记了,也不知道写的对不对,但是测试了下,代码还算完善。

题是这样的:

/*
Whyme 14:49:13
JS中假如Function.prototype.call不存在
但Function.prototype.apply存在
试用后者实现前者.(其余js 1.5特性也具备)
*/

我写了2个版本,第一个有点错,就不发了。。第2个发出来看下:

Function.prototype.call=function(){
var type=typeof arguments[0] == ‘function’ || typeof arguments[0] == ‘object’;
switch (arguments.length){
case 0:
return this.apply();
break;
case 1:
if(type){
return this.apply(arguments[0]);
}else{
throw new Error(arguments[0]+’ is not provide’);
}
break;
default:
if(type){
var ary = [];
for (var i = 0; i < arguments.length; i++) {
ary.push(arguments[i + 1]);
}
return this.apply(arguments[0], ary);
}else{
throw new Error(arguments[0]+’ is not provide’);
}
};
};

简单的测试了下……再简化我就不知道怎么写了。。。

经过又20分钟的思考。得到下面精简版本- -||

Function.prototype.call = function(){
var type=typeof arguments[0] == ‘function’ || typeof arguments[0] == ‘object’ || arguments[0]!=’undefined’;
if (type){
var ary = [];
for (var i = 0; i < arguments.length; i++) {
ary.push(arguments[i + 1]);
}
return this.apply(arguments[0], ary);
}else{
throw new Error(arguments[0]+’ is undefined’);
}
};

期待更精简的。特此记录。。。

史努比的:(没经测试……)

Function.prototype.call = (function() {
var slice = Array.prototype.slice;
return function () {
var args = slice.apply(arguments)
, context = args.shift();
return this.apply(context, args);
}
})();

确实比我的短……哎- -忘记用array对象里的那几个方法了……//但是我认为他没对thisObj做检查,应该可能是个隐患- -?

最后的结果是没有类型检查半毛钱关系,异常全部交给apply处理,截取参数数组使用array对象的方法,完事。我想太多了。。。不好意思- -||

Read More