V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
typcn
V2EX  ›  问与答

如何让 AJAX 请求 加载的慢一点

  •  
  •   typcn · 2014-11-20 13:36:47 +08:00 · 4349 次点击
    这是一个创建于 3660 天前的主题,其中的信息可能已经有所发展或是发生改变。
    我写了个 blog 系统,google 了一个加载动画,结果发现,动画还没开始播放,页面已经加载完了,如何让请求慢一点,或者是在动画完全覆盖网页之后再开始加载。不然感觉有点不协调了。。


    

    地址 http://blog.eqoe.cn/

    手打的 js 和 css 都是没有压缩的,除了 jquery
    第 1 条附言  ·  2014-11-20 16:46:35 +08:00
    好吧解决了 又离 Callback hell 近了一步

    给 loader.show() 加了一个callback参数

    在 OnAnimateEnd 的 Callback 中 执行show事件的callback
    35 条回复    2014-11-20 23:05:55 +08:00
    lichao
        1
    lichao  
       2014-11-20 13:44:53 +08:00   ❤️ 1
    让 Ajax 的后端,sleep 一两秒
    typcn
        2
    typcn  
    OP
       2014-11-20 13:47:44 +08:00
    @lichao CDN会缓存请求的啊
    adjusted
        3
    adjusted  
       2014-11-20 13:48:10 +08:00
    animationend的listener?
    typcn
        4
    typcn  
    OP
       2014-11-20 13:50:39 +08:00
    @adjusted 如何 listen 一个 div 是否有某个 class,难道只能用定时器吗
    lichao
        5
    lichao  
       2014-11-20 13:51:01 +08:00
    @typcn 你的 Ajax 如果是基于 post 请求,应该不会有缓存
    如果是 get 请求,url 后面加个时间戳
    hellojinjie
        6
    hellojinjie  
       2014-11-20 13:51:39 +08:00
    好炫的效果啊
    hcymk2
        7
    hcymk2  
       2014-11-20 13:53:16 +08:00
    好像翻页的时候能看到动画效果。
    typcn
        8
    typcn  
    OP
       2014-11-20 13:53:22 +08:00
    @lichao 我就是想在他缓存的情况下等,不加缓存的话 ,我怕服务器带宽受不住,一天承受几万次CC的
    @hellojinjie 哈哈 业余爱好写写 blog
    typcn
        9
    typcn  
    OP
       2014-11-20 13:53:34 +08:00
    @hcymk2 点击文章页可以的
    lichao
        10
    lichao  
       2014-11-20 13:55:08 +08:00
    @typcn 那可以在客户端 setTimeout 啊,方法多多的
    typcn
        11
    typcn  
    OP
       2014-11-20 13:56:47 +08:00
    @lichao 在电脑上 动画加载的很快,如果set上1秒的话 会觉得加载有点慢了,在手机上 set 1秒正好,但是0.5秒就有点问题了,比较纠结 这个
    fanzeyi
        12
    fanzeyi  
       2014-11-20 15:30:04 +08:00


    Chrome 拯救你。
    typcn
        13
    typcn  
    OP
       2014-11-20 15:36:49 +08:00
    @fanzeyi 这个。。。。让访客慢一些啊 我速度无所谓

    主要我有强迫症 完美主义
    Livid
        14
    Livid  
    MOD
       2014-11-20 15:39:13 +08:00
    速度快是好事情啊。
    typcn
        15
    typcn  
    OP
       2014-11-20 15:40:27 +08:00
    @Livid 看来我需要换一个简单快速动画类型了
    mhycy
        16
    mhycy  
       2014-11-20 15:42:08 +08:00
    好快的服务器....
    hcymk2
        17
    hcymk2  
       2014-11-20 15:43:16 +08:00
    @typcn
    让访问首页的时候先 模拟一个点击事件。
    xoxo
        18
    xoxo  
       2014-11-20 15:44:54 +08:00
    setTimeout(function(){...}, 1000);
    typcn
        19
    typcn  
    OP
       2014-11-20 15:45:34 +08:00
    @hcymk2 啊?提前载入?
    typcn
        20
    typcn  
    OP
       2014-11-20 15:46:18 +08:00
    @xoxo 在电脑上的话 500比较合适,但是在手机上 1000比较合适,没法判断设备的性能,怎么办

    我强迫症
    justplaymore
        21
    justplaymore  
       2014-11-20 16:04:42 +08:00   ❤️ 1
    用promise来实现,参阅jQuery的deferred对象
    http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html
    $.ajax(...).done(...).done(...);

    将异步流程改成顺序执行,而不应该从时间轴上去取巧,异步时间轴是不可预测的。
    tmkook
        22
    tmkook  
       2014-11-20 16:04:44 +08:00
    加个时间统计,1秒以内就延迟1秒,如果超过1秒就不延迟
    dong3580
        23
    dong3580  
       2014-11-20 16:19:15 +08:00
    jasonslyvia
        24
    jasonslyvia  
       2014-11-20 16:23:53 +08:00
    一堆人出馊主意,楼主明显是舍本逐末啊,为了显示动画而显示动画,根本就失去了加载动画的原本用意……
    fengchang
        25
    fengchang  
       2014-11-20 16:32:13 +08:00
    典型的没有需求制造需求。别人都是因为加载太慢怕用户失去耐心才做加载动画,你速度这么快做什么动画。
    typcn
        26
    typcn  
    OP
       2014-11-20 16:45:12 +08:00
    @jasonslyvia
    @fengchang 解决了 我有强迫症 想让慢网络和快网络能一样,加了个动画。。
    lygmqkl
        27
    lygmqkl  
       2014-11-20 16:56:05 +08:00
    setTimeout 把压力方到客户端。 其实这种东西 会审美疲劳的。。。每次都放,然后也没读出多少数据来。。。用户会想,好烂的服务器啊。
    typcn
        28
    typcn  
    OP
       2014-11-20 17:00:11 +08:00
    @lygmqkl 我已经解决了这个问题 ,你可以点击链接访问一下试试效果
    yanleijava
        29
    yanleijava  
       2014-11-20 17:03:09 +08:00
    sucess里面 sleep
    justplaymore
        30
    justplaymore  
       2014-11-20 17:16:33 +08:00
    好吧解决了 又离 Callback hell 近了一步

    给 loader.show() 加了一个callback参数

    在 OnAnimateEnd 的 Callback 中 执行show事件的callback

    ==========================

    额,避免用callback写法,promise就是用来解决callback hell的,用deferred对象的resolve和reject方法来处理执行状态,可以避免callback依赖,只改变deferred对象的状态,前面的链接里文章讲得很清楚了。
    p2p
        31
    p2p  
       2014-11-20 18:24:26 +08:00
    数据获取 加callback

    太快时再加延迟,保证你的动画有机会涨姿势
    typcn
        32
    typcn  
    OP
       2014-11-20 18:28:14 +08:00
    @p2p 不是。。。我是怕页面已经加载完动画才播放,我不希望用户看到DOM变化,在动画播放的0.5秒内加载页面而不是还没开始播放就在0.1秒内加载完了页面,,。。。
    Phariel
        33
    Phariel  
       2014-11-20 18:31:18 +08:00
    不要陷入callback hell, 前端现在都是promise封装。你先学习一下promise的理论知识,然后用这个https://github.com/cujojs/when 这算一个比较好的promise实现库,当然jQuery也有promise的实现,任君选择。
    lygmqkl
        34
    lygmqkl  
       2014-11-20 22:16:34 +08:00
    帮你抓个bug, Mac os x, Safari 点入一个主题,可以成功打开,然后使用后退按钮无效。
    aiguozhedaodan
        35
    aiguozhedaodan  
       2014-11-20 23:05:55 +08:00
    楼主你博客的速度真的好快……
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3834 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 34ms · UTC 00:53 · PVG 08:53 · LAX 16:53 · JFK 19:53
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.