10 月

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

星期四, 2008 By bigCat . under Code .

大家都知道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服务器端就可以实现跨域使用了

» You can leave a comment, or trackback from your own site.

大战 33 回合 to “监视输入频率控制AJAX请求数”

Leo说道：

2008-10-09 04:00

-_-b

你居然写技术文章

回复
- BigCat说道：
  
  2008-10-09 13:21
  
  @Leo, 囧,被鄙视了
  
  回复
- 醉倚西风说道：
  
  2008-10-14 17:28
  
  @Leo,他写的还是不错的哈哈
  
  回复
homer说道：

2008-10-09 08:58

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

回复
- BigCat说道：
  
  2008-10-09 13:21
  
  @homer, …你这样,用户体验很不好
  
  回复
  - homer说道：
    
    2008-10-09 15:41
    
    @BigCat, 貌似很多论坛注册采用这个功能你找个一个脱掉看看就能有收获哈：）
  - BigCat说道：
    
    2008-10-09 15:45
    
    @homer, 哈,并不是用的多的就是好的,均衡用户体验和服务器负担才是王道
  - homer说道：
    
    2008-10-09 16:13
    
    @BigCat, 按道理因该有个时间数值可以调的。。。。你慢慢找找看。。。
  - BigCat说道：
    
    2008-10-09 18:16
    
    @homer, 后面那个1000就是数值,单位是毫秒哈
- Yacca说道：
  
  2008-10-09 14:21
  
  @homer, 我讨厌窗口…
  
  回复
  - homer说道：
    
    2008-10-09 15:42
    
    @Yacca, 看样子你经常被弹窗弹～
Enson说道：

2008-10-09 09:35

看不懂….
另第一幅图片是什么意思呢…

回复
- BigCat说道：
  
  2008-10-09 13:22
  
  @Enson, 因为技术文章一般都比较无聊,所以配个解闷的图…
  
  回复
  - Enson说道：
    
    2008-10-09 16:03
    
    @BigCat, 喵rz…
飞鱼说道：

2008-10-09 10:25

怎么不用Jquery 这个淫荡的J叔叔。。。做ajax延迟判断非常地效率··^_^

回复
- BigCat说道：
  
  2008-10-09 13:26
  
  @飞鱼, 因为…因为…Jquery用多了,就不会用原生js了
  (其实是我不会用)
  
  回复
  - 飞鱼说道：
    
    2008-10-12 13:15
    
    @BigCat, 不过貌似挺多大站都是用jquery 还有用YUI 的淘宝似乎就是用YUI 整理过来的
  - BigCat说道：
    
    2008-10-12 19:17
    
    @飞鱼, 恩，国际站是基于YUI改的，叫ae.js框架哈哈
    正在学～
- Evance说道：
  
  2008-10-10 08:50
  
  @飞鱼, 原理都一样的．
  
  而且现在jQeury还没有import呢.哈　.
  
  回复
自然堂说道：

2008-10-09 12:25

鹤鞋的猪。。。。

回复
阿企说道：

2008-10-09 14:22

技术贴，BS

回复
homer说道：

2008-10-09 16:46

不吹水的帖子很囧～

回复
Evance说道：

2008-10-10 08:48

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

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

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

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

另外，不要叫我＂花花＂了么..　日

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

2008-10-11 17:38

http://bloggermap.org/map.php?id=423
原来大猫住在太平洋中心的，凶悍！

回复
- 大猫说道：
  
  2008-10-11 19:34
  
  @cosbeta, hawaii,beauty&bikini&beach~
  
  回复
vampire说道：

2008-10-17 14:20

这个实际上只是个策略问题。。。跟onblur事件触发相比确实是个好办法反应迅速也少两次鼠标点击嗯。。。
用onkeyup，那opera下输入中文怎么办

跨域的话为之漫笔博客提到的JSONP我觉得挺好的 http://www.cn-cuckoo.com/2008/09/13/the-origin-of-jsonp-262.html

回复
- BigCat说道：
  
  2008-10-28 20:14
  
  @vampire, opera不考虑了,因为根据份额,权衡投入的成本:)
  感谢推荐~
  
  回复
Mac说道：

2008-10-21 07:52

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

回复
- BigCat说道：
  
  2008-10-28 20:15
  
  @Mac, 俺看过说明书…
  
  回复
Joseph说道：

2012-09-12 16:11

你博客的风格很奇怪哦

回复
- bigCat说道：
  
  2012-09-12 16:12
  
  @Joseph 呃,奇怪在哪?
  
  回复