如何实现实时的进度条？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

For Existing Member Sign In

推荐学习书目

› Learn Python the Hard Way

Python Sites

› PyPI - Python Package Index

› http://diveintopython.org/toc/index.html

› Pocoo

值得关注的项目

› PyPy

› Celery

› Jinja2

› Read the Docs

› gevent

› pyenv

› virtualenv

› Stackless Python

› Beautiful Soup

› 结巴中文分词

› Green Unicorn

› Sentry

› Shovel

› Pyflakes

› pytest

Python 编程

› pep8 Checker

Styles

› PEP 8

› Google Python Style Guide

› Code Style from The Hitchhiker's Guide

This topic created in 3473 days ago, the information mentioned may be changed or developed.

提交数据后，可能需要时间执行，后端如何与前端保持一个同步的进度显示？
比如后台执行到 20% 前端就显示 20%

进度

执行

前端

后台

21 replies • 2016-10-29 22:43:42 +08:00

lcorange

Oct 28, 2016

1. 前台 js 定时访问拿数据
2. websocket

alqaz

Oct 28, 2016 via Android

难点估计不在交互，在于怎么判断任务执行百分比

mayne95

Oct 28, 2016

后端执行一点功能就往前面返回一个状态。感觉这么搞负担好大。而且我看网站都是一点就过去了，速度都很快，单纯的为了视觉效果弄个假的糊弄算了。 gmail 加载好像跟你这个需求差不多。

ihuotui

Oct 28, 2016 via Android

大概就行了，根据数据量预估一个时间，然后剩下一点等待服务器返回成功

Powered

Oct 28, 2016

三种思路:

1. WebSocket
2. 内嵌一个 iframe,写一个 timer 不停去刷新 iframe 中的内容(iframe 的 src 属性指向你的长耗时任务的 URL),根据内容字符串的最后一个百分号的值，获得进度。
3. 使用 ajax XMLHttpRequest level 2 API

给出一个例子:

后端:

```javascript
'use strict';

const http = require('http');

const server = http.createServer();
server.on('request', function(req, res) {
console.log('HTTP', req.method, req.url);
let n = 0;
res.writeHead(200, {
'Content-Type': 'text/plain',
'Connection': 'keep-alive',
'Access-Control-Allow-Origin': '*',
'Content-Length': 100
});

const inter = setInterval(function() {
res.write('.');
n++;
if (n >= 100) {
clearInterval(inter);
res.end();
}
}, 50);

res.on('error', function(err) {
console.log(err);
});

res.on('close', function() {
console.log('Connection close');
})
});

server.listen(8000);

```

前端:

```html
<!DOCTYPE html>
<HTML>
<head>
<meta charset="utf-8"/>
<style>
.progress-bar {
border: 1px solid rgb(230, 230, 230);
padding: 0px;
position: relative;
height: 4px;
border-radius: 2px;
}

.progress-bar > .progress-bar-inner {
margin: 0px;
width: 30%;
background-color: rgb(0, 180, 20);
height: 4px;
border-radius: 2px;
}
</style>
</head>
<body>
<div class="progress-bar">
<div id="pro" class="progress-bar-inner"></div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
var progress = $('#pro');
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:8000/', true);
xhr.onprogress = function(event) {
if (event.lengthComputable) {
var pro = event.loaded/event.total;
console.log(pro);
progress.css('width', pro*100 + '%');
}
};
xhr.send();
</script>
</body>
</HTML>
```

Powered

Oct 28, 2016

上面的例子使用使用 ajax XMLHttpRequest level 2 API 做的

eyp82

Oct 28, 2016

没有必要, 你观察一下就会发现大多数的进度条都是假的, 只是视觉安慰而已.
除非你真的需要根据这个进度条精确定位(但其实这个很难, 比如很难估计一项任务到底要花多少时间)

shlabc

Oct 28, 2016

前端用 Flash 编程，可以做到实时

adv007

Oct 28, 2016 via iPhone

@shlabc 啥年代了，还 fla

adv007

Oct 28, 2016 via iPhone

websocket http-chunk

shlabc

Oct 28, 2016

@adv007 呵呵，我只是说这个技术绝对能做到啊

silencefent

Oct 28, 2016

卡 99%好吧，解决了就 100%

SourceMan

Oct 28, 2016 via iPhone

你看看苹果的"少于一分钟"，你就知道你现在这个需求有没有意义了

guyskk

Oct 29, 2016 via Android

我记得有个讨论是说: 数据是从客户端发送出去的，客户端本身就应该知道已经发送了多少数据，也就能知道百分比，为何要询问服务端自己已经知道的事情？

现在 XMLHttpRequest 有上传进度的接口，具体可以在 MDN 找到。 5 楼的实现是正确的，也可以去翻 jQuery 等涉及 AJAX 的库源码，应该能找到上传进度的实现，我之前也是在一个库里看到的，不过一时找不到在哪了。