监视输入频率控制AJAX请求数

大家都知道AJAX是非常好玩的东东,这几天俺在写表单验证JS的时候遇到了一问题: 在注册表单输入用户名的时候,俺采用了onkeyup事件来触发AJAX校验,就是说每打一个字,表单就会去服务器那问一下是不是这用户名可以用,Justin章同学提出这样子服务器负担会比较大,比如疯狂打100个字就会发送100个请求,而Peter饭同学建议通过监视输入频率来控制请求数 具体实现效果描述如下:

两次击键间隔少于1秒不会发送请求,直到停顿时间超过1秒后发送一坨请求 逻辑如下:

设置一个timer倒计时1秒,每次击键都会初始化timer并重新开始倒计时 在骚扰花花同学一通后得出代码如下:

var timer;
function delay() {
if (timer) clearTimeout(timer);
timer = setTimeout(AJAX,1000);
}
function AJAX(){alert("假装我是AJAX")}

注意setTimeout的函数调用在IE下是不能传递变量的,

比如不能写成 setTimeout(AJAX(‘cat’),1000)

哈,这里还有个AJAX跨域的小东东,我用的是一个PHPproxy把$proxy_url改成你的AJAX服务器端就可以实现跨域使用了

33 评论

添加您的 →

这个太复杂。。而且增加页面代码长度。。。。我觉得因该用个按钮检查。最好跳出个小窗口:)
简单又省心哈哈:)

@BigCat, 貌似很多论坛注册采用这个功能 你找个一个脱掉看看就能有收获哈:)

@homer, 哈,并不是用的多的就是好的,均衡用户体验和服务器负担才是王道

@飞鱼, 因为…因为…Jquery用多了,就不会用原生js了
(其实是我不会用)

@BigCat, 不过貌似 挺多 大站 都是用jquery 还有用YUI 的 淘宝似乎就是用YUI 整理过来的

@飞鱼, 原理都一样的.

而且现在jQeury还没有import呢.哈 .

Peter饭  … 雷.
从效率上考虑来说,这样子客户端的压力增大了.
我觉得这种细节的事情讨论过来仔细起来最终没有一个好结果.

举例说明:
如果Timeout设置为5秒
用户用了很快的速度输完了,跳转到了下一个option item,却不会触发校验.
要等5秒到了才校验.

如果再加一个blur事件,那这一个即时校验有啥意义呢?
PD的主导性太强了 ..

还好这次我没有参加讨论..
幸甚 ..
哈哈.

另外,不要叫我"花花"了么.. 日

@Evance, 我觉得0.7 – 1秒左右是比较合理的时间,按照正常速度输入的话
对于用户:也不会反应很迟钝
对服务器:1秒超时能保证大部分时间都能连续输入,超时后才发送请求也节约了服务器资源
对本地效率,个人感觉这种程度的效率牺牲还是值得的
牵扯到各个方面,寻找一个平衡点就根据不同情况来调整了,所谓平衡点就在于那个时间到底是几秒了,哈

setTimeout是这么用di:
setTimeout(
function(){
//YOUR_FUNC();
//YOUR_FUNC(ARGV);
//alert(‘hello,world’)
},1000);

发表回复