大猫 (Madao) - まるでダメなおっさん

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

by bigCat 33 Comments

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

Comments ( 33 )

  1. ReplyLeo
    -_-b 你居然写技术文章
  2. Replyhomer
    这个太复杂。。而且增加页面代码长度。。。。我觉得因该用个按钮检查。最好跳出个小窗口:) 简单又省心哈哈:)
    • ReplyBigCat
      @homer, ...你这样,用户体验很不好
      • Replyhomer
        @BigCat, 貌似很多论坛注册采用这个功能 你找个一个脱掉看看就能有收获哈:)
        • ReplyBigCat
          @homer, 哈,并不是用的多的就是好的,均衡用户体验和服务器负担才是王道
          • Replyhomer
            @BigCat, 按道理因该有个时间数值可以调的。。。。你慢慢找找看。。。
            • ReplyBigCat
              @homer, 后面那个1000就是数值,单位是毫秒哈
    • ReplyYacca
      @homer, 我讨厌窗口...
      • Replyhomer
        @Yacca, 看样子你经常被弹窗弹~
  3. ReplyEnson
    看不懂.... 另 第一幅图片是什么意思呢...
    • ReplyBigCat
      @Enson, 因为技术文章一般都比较无聊,所以配个解闷的图...
      • ReplyEnson
        @BigCat, 喵rz...
  4. Reply飞鱼
    怎么不用Jquery 这个淫荡的J叔叔。。。做ajax延迟判断 非常地效率··^_^
    • ReplyBigCat
      @飞鱼, 因为...因为...Jquery用多了,就不会用原生js了 (其实是我不会用)
      • Reply飞鱼
        @BigCat, 不过貌似 挺多 大站 都是用jquery 还有用YUI 的 淘宝似乎就是用YUI 整理过来的
        • ReplyBigCat
          @飞鱼, 恩,国际站是基于YUI改的,叫ae.js框架哈哈 正在学~
    • ReplyEvance
      @飞鱼, 原理都一样的. 而且现在jQeury还没有import呢.哈 .
  5. Reply自然堂
    鹤鞋的猪。。。。
  6. Reply阿企
    技术贴,BS
  7. Replyhomer
    不吹水的帖子很囧~
  8. ReplyEvance
    Peter饭  ... 雷. 从效率上考虑来说,这样子客户端的压力增大了. 我觉得这种细节的事情讨论过来仔细起来最终没有一个好结果. 举例说明: 如果Timeout设置为5秒 用户用了很快的速度输完了,跳转到了下一个option item,却不会触发校验. 要等5秒到了才校验. 如果再加一个blur事件,那这一个即时校验有啥意义呢? PD的主导性太强了 .. 还好这次我没有参加讨论.. 幸甚 .. 哈哈. 另外,不要叫我"花花"了么.. 日
    • ReplyBigCat
      @Evance, 我觉得0.7 - 1秒左右是比较合理的时间,按照正常速度输入的话 对于用户:也不会反应很迟钝 对服务器:1秒超时能保证大部分时间都能连续输入,超时后才发送请求也节约了服务器资源 对本地效率,个人感觉这种程度的效率牺牲还是值得的 牵扯到各个方面,寻找一个平衡点就根据不同情况来调整了,所谓平衡点就在于那个时间到底是几秒了,哈
    • ReplyBigCat
      @Evance, 另外,花花啊,我决定以后不叫你花花了,好么,花花?
  9. Replycosbeta
    http://bloggermap.org/map.php?id=423 原来大猫住在太平洋中心的,凶悍!
    • Reply大猫
      @cosbeta, hawaii,beauty&bikini&beach~
  10. Replyvampire
    这个实际上只是个策略问题。。。 跟onblur事件触发相比 确实是个好办法 反应迅速 也少两次鼠标点击 嗯。。。 用onkeyup,那opera下输入中文怎么办 跨域的话 为之漫笔博客提到的JSONP我觉得挺好的 http://www.cn-cuckoo.com/2008/09/13/the-origin-of-jsonp-262.html
    • ReplyBigCat
      @vampire, opera不考虑了,因为根据份额,权衡投入的成本:) 感谢推荐~
  11. ReplyMac
    setTimeout是这么用di: setTimeout( function(){ //YOUR_FUNC(); //YOUR_FUNC(ARGV); //alert('hello,world') },1000);
    • ReplyBigCat
      @Mac, 俺看过说明书...
  12. ReplyJoseph
    你博客的风格很奇怪哦

Leave a reply

Your email address will not be published.

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>