V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
Daemonguo
V2EX  ›  JavaScript

如何实现单击按钮后进度条开始走,同时执行后台的程序, 当程序执行完成,进度条也就达到 100%

  •  
  •   Daemonguo · 2016-12-29 16:06:36 +08:00 · 4447 次点击
    这是一个创建于 2921 天前的主题,其中的信息可能已经有所发展或是发生改变。
    第 1 条附言  ·  2016-12-30 13:58:17 +08:00
    就比如说我点击了按钮 ” Install “ 对吧,那这时候我请求的 url 就去后端处理我的 install 请求对吧,那么我就想展示这个 install 的过程通过进度条展示出来。
    18 条回复    2016-12-30 18:27:27 +08:00
    qfdk
        1
    qfdk  
       2016-12-29 16:11:03 +08:00 via Android
    js ? socket io 跟后端通信 或者虚假一点 第一次 random 进度 最后 完成的 callback 跑满
    am241
        2
    am241  
       2016-12-29 16:17:08 +08:00
    每次递增 1/(2**n)
    inkWave
        3
    inkWave  
       2016-12-29 16:19:20 +08:00
    前面 99%想怎么写怎么写,接到成功回调后,直接进度条 width 100%
    liyu4
        4
    liyu4  
       2016-12-29 16:20:04 +08:00
    没有非常好的办法,三楼的想法比较赞成。
    knightdf
        5
    knightdf  
       2016-12-29 16:25:42 +08:00
    本来都是这样的,前面 99%随意你,后面 1%才是关键
    dwood
        6
    dwood  
       2016-12-29 16:26:39 +08:00
    要精确的话,后台程序异步执行的同时往缓存里面写进度,前端每隔一段时间请求进度值。
    lijy91
        7
    lijy91  
       2016-12-29 16:41:31 +08:00
    你可以看看这个插件的逻辑: http://ricostacruz.com/nprogress/
    Felldeadbird
        8
    Felldeadbird  
       2016-12-29 16:49:48 +08:00
    做一个伪进度就可以了。等后端回来就直接 100%。
    ChefIsAwesome
        9
    ChefIsAwesome  
       2016-12-29 16:56:27 +08:00
    对用户真正有用的进度条是能看到结束时间的进度条。想知道结束时间基本是不可能的,想知道当前进度,要实现起来也是异常困难的。所以你还是弄个菊花转转吧。
    wesley
        10
    wesley  
       2016-12-29 17:10:54 +08:00
    分解成 N 个子任务,在队列中依次请求,每完成一个,进度增加 1/N
    qwer1234asdf
        11
    qwer1234asdf  
       2016-12-29 17:24:33 +08:00
    ajaxForm
    SpicyCat
        12
    SpicyCat  
       2016-12-29 18:06:08 +08:00
    用户想看进度条其实是有两层意思:
    1. 想知道预估结束时间。很多时候这个办不到。
    2. 想知道页面有没有死掉。这个简单。总之想办法让页面一直有反馈就行了,比如用户多次提交就提示用户耐心一点。
    jsq2627
        13
    jsq2627  
       2016-12-29 19:09:17 +08:00 via iPhone
    道理很简单啦
    真的进度条只有在文件下载上传、压缩解压这种能准确衡量的情况下才能做出来
    其他都是假进度条,只有 0 和 100 之分,动画只是骗人用的
    bdbai
        14
    bdbai  
       2016-12-29 19:30:19 +08:00 via Android   ❤️ 1
    后端用 chunked 格式回响应,随时返回进度,兼容性也不错。
    Tink
        15
    Tink  
       2016-12-29 22:40:14 +08:00
    做一个 flash, 自动走到 100

    哈哈哈哈哈
    HLT
        16
    HLT  
       2016-12-30 09:37:37 +08:00
    用 JS 库。。。很多
    Daemonguo
        17
    Daemonguo  
    OP
       2016-12-30 13:48:24 +08:00
    @bdbai 求教,有没有实现的案例?
    bdbai
        18
    bdbai  
       2016-12-30 18:27:27 +08:00 via Android
    @Daemonguo 你的后端是?一般后端框架都有处理的,有进度就往响应流里手动写入一点数据,完成再关闭。
    前端直接通过 XMLHttpRequest 监听 onreadystatechange 事件读服务器已发的数据,不用 jQuery 。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2752 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 13:50 · PVG 21:50 · LAX 05:50 · JFK 08:50
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.