此处进度条宽度未正确更新。我使用 socket.io 来发出进度百分比。
尽管进度百分比为 100%，但如所提供的屏幕截图所示。如果我手动重新刷新 html 页面，则进度条宽度正在正确更新。
我真的被困在这里了。有人可以帮我解决这个问题吗......
我的app.js:
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var fs = require('fs');
var request = require('request');
var progress = require('request-progress');
var targz = require('tar.gz');
var DOWNLOAD_DIR = '/usr/local/';
var file_name = 'node-v0.12.7.tar.gz'
var routes = require('./routes/index');
var users = require('./routes/users');
var app = express ();
var http = require('http').createServer(app);
var io = require('socket.io')(http);
http.listen(8085, function(){
console.log('listening on *:8085');
});
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
app.use('/users', users);
app.get('/get', function (req, res) {
res.sendfile('views/index.html');
});
io.of('/socket_issue').on('connection', function (socket) {
console.log("Socket connected :"+socket.id);
});
var callback = function(state){
console.log('received size in bytes', state.received);
console.log('total size in bytes', state.total);
console.log('percent', state.percent);
io.of('/socket_issue').emit('message', JSON.stringify({size: state.total, received: state.received, percent: state.percent, fileName: file_name}));
}
progress(request('https://nodejs.org/dist/v0.12.7/node-v0.12.7.tar.gz'), {
throttle:0,
delay: 0
})
.on('progress', callback)
.pipe(fs.createWriteStream(DOWNLOAD_DIR + file_name))
.on('error', function (err) {
console.log("error");
})
.on('close', function (err){
console.log("Download Complete");
})
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
module.exports = app;
我的index.html:
<html>
<head>
<style>
#progressBar {
width: 400px;
height: 22px;
border: 1px solid #111;
background-color: #292929;
}
#progressBar div {
height: 100%;
color: #fff;
text-align: right;
line-height: 22px; /* same as #progressBar height if we want text middle aligned */
width: 0;
background-color: #0099ff;
}
</style>
</head>
<body>
<script type="text/javaScript">
</script>
<script src="http://localhost:8085/javascripts/socket.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<div id="progressBar"><div></div></div>
<script type="text/javascript">
var socket = io('http://localhost:8085/socket_issue');
socket.on('connect', function(){ console.log('connected to socket'); });
socket.on('error', function(e){ console.log('error' + e); });
socket.on('message', function(data){
console.log(data);
var percentage = JSON.parse(data).percent;
function progress(percent, $element) {
var progressBarWidth = percent * $element.width() / 100;
$element.find('div').animate({ width: progressBarWidth }, 500).html(percent + "% ");
}
progress(percentage, $('#progressBar'));
});
socket.on('disconnect', function(){});
</script>
</body>
</html>
进度条的屏幕截图:
最佳答案
不要让事情变得过于复杂。
socket.on( 'message', function( data ){
$( '#progressBar div' ).css( "width", data + "%" );
$( '#progressBar div' ).html( data + "%" );
}
然后添加 CSS transition规则
#progressBar div {
transition: 500ms ease-in;
}
这将消除使用 animate 函数的需要。
关于javascript - 我无法更新 jquery 中的进度条宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33820379/