为什么我无法在Jquery中使用progressbar.js？

Question

我目前正在使用Javascript和Jquery开发一个带有node.js和electronic的应用程序，该应用程序将在首次运行时下载db文件。 我想实现progressbar.js，以便在文件下载时显示一个下载栏。 我正在按照progressbar.js的设置指南进行操作，并从ourcodeworld.com进行了javascript下载，但是，运行我的电子应用程序时，下载栏根本无法显示。 我将如何使其在电子中工作，以便进度条呈现并显示下载进度？

HTML代码

<body>

    <div id="container"></div>

</body>

Javascript / jQuery

            var bar = new ProgressBar.Line(container, {
                strokeWidth: 4,
                easing: 'easeInOut',
                duration: 1400,
                color: '#FFEA82',
                trailColor: '#eee',
                trailWidth: 1,
                svgStyle: { width: '100%', height: '100%' }
            });
            function progress() {
                bar.animate(1.0);  // Number from 0.0 to 1.0
            }

            function downloadFile(file_url, targetPath) {
                // Save variable to know progress
                var received_bytes = 0;
                var total_bytes = 0;

                var req = request({
                    method: 'GET',
                    uri: file_url
                });

                var out = fs.createWriteStream(targetPath);
                req.pipe(out);

                req.on('response', function (data) {
                    // Change the total bytes value to get progress later.
                    total_bytes = parseInt(data.headers['content-length']);
                });

            req.on('data', function (chunk) {
                // Update the received bytes
                received_bytes += chunk.length;

                progress();
            });

            req.on('end', function () {
                alert("File succesfully downloaded");
            });
        }
downloadFile("http://www.planwallpaper.com/static/images/butterfly-wallpaper.jpeg", "./varbutterfly-wallpaper.jpeg");

小提琴

Answer 1

您总是将进度值赋予1.0

function progress() {
    bar.animate(1.0);  // Number from 0.0 to 1.0
}

所以请改成

function progress(val) {
    bar.animate(val);  // Number from 0.0 to 1.0
}

然后将更新从

req.on('data', function (chunk) {
    // Update the received bytes
    received_bytes += chunk.length;
    progress();
});

对此

req.on('data', function (chunk) {
    // Update the received bytes
    received_bytes += chunk.length;
    progress(received_bytes/total_bytes);
});

如您所见，您将发现每次块更新的进度更改都将其除以total_bytes如果已全部下载），则将为1.0，否则将是您需要的动画。

或者您可以将进度功能更改为

function progress(val) {
    bar.set(val); // Number from 0.0 to 1.0
}

无需动画即可精确设置该值。

为什么我无法在Jquery中使用progressbar.js？

问题描述

1 个解决方案

解决方案1
2 已采纳 2017-10-16 06:24:29

为什么我无法在Jquery中使用progressbar.js？

问题描述

1 个解决方案

解决方案1 2 已采纳 2017-10-16 06:24:29

解决方案1
2 已采纳 2017-10-16 06:24:29