— Designsor

Archive
Tag "throttle"

在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