监视输入频率控制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服务器端就可以实现跨域使用了


已发布

分类

来自

标签:

评论

《“监视输入频率控制AJAX请求数”》 有 33 条评论

  1. Leo 的头像
    Leo

    -_-b

    你居然写技术文章

    1. BigCat 的头像

      @Leo, 囧,被鄙视了

    2. 醉倚西风 的头像

      @Leo,他 写的还是不错的 哈哈

  2. homer 的头像

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

    1. BigCat 的头像

      @homer, …你这样,用户体验很不好

      1. homer 的头像

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

        1. BigCat 的头像

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

          1. homer 的头像

            @BigCat, 按道理因该有个时间数值可以调的。。。。你慢慢找找看。。。

            1. BigCat 的头像

              @homer, 后面那个1000就是数值,单位是毫秒哈

    2. Yacca 的头像

      @homer, 我讨厌窗口…

      1. homer 的头像

        @Yacca, 看样子你经常被弹窗弹~

  3. Enson 的头像
    Enson

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

    1. BigCat 的头像

      @Enson, 因为技术文章一般都比较无聊,所以配个解闷的图…

      1. Enson 的头像
        Enson

        @BigCat, 喵rz…

  4. 飞鱼 的头像

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

    1. BigCat 的头像

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

      1. 飞鱼 的头像

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

        1. BigCat 的头像

          @飞鱼, 恩,国际站是基于YUI改的,叫ae.js框架哈哈
          正在学~

    2. Evance 的头像
      Evance

      @飞鱼, 原理都一样的.

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

  5. 自然堂 的头像

    鹤鞋的猪。。。。

  6. 阿企 的头像

    技术贴,BS

  7. homer 的头像

    不吹水的帖子很囧~

  8. Evance 的头像
    Evance

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

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

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

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

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

    1. BigCat 的头像

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

    2. BigCat 的头像

      @Evance, 另外,花花啊,我决定以后不叫你花花了,好么,花花?

  9. cosbeta 的头像

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

    1. 大猫 的头像

      @cosbeta, hawaii,beauty&bikini&beach~

  10. vampire 的头像
    vampire

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

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

    1. BigCat 的头像

      @vampire, opera不考虑了,因为根据份额,权衡投入的成本:)
      感谢推荐~

  11. Mac 的头像

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

    1. BigCat 的头像

      @Mac, 俺看过说明书…

  12. Joseph 的头像

    你博客的风格很奇怪哦

    1. bigCat 的头像

      @Joseph 呃,奇怪在哪?

回复 vampire 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注