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

Question

I am currently making an application in Javascript and Jquery with node.js and electron that will download it's db files on first run. 我目前正在使用Javascript和Jquery开发一个带有node.js和electronic的应用程序，该应用程序将在首次运行时下载db文件。 I want to implement the progressbar.js so that it shows a download bar when the files are downloading. 我想实现progressbar.js，以便在文件下载时显示一个下载栏。 I am following the setup guide for progressbar.js and implemented a javascript download with progress from ourcodeworld.com however, when running my electron app, the download bar does not render at all. 我正在按照progressbar.js的设置指南进行操作，并从ourcodeworld.com进行了javascript下载，但是，运行我的电子应用程序时，下载栏根本无法显示。 How would I get this to work in electron so that the progress bar renders and shows the download progress? 我将如何使其在电子中工作，以便进度条呈现并显示下载进度？

HTML CODE HTML代码

<body>

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

</body>

Javascript/Jquery 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");

fiddle 小提琴

Answer 1

You always give the value to the progress with 1.0 您总是将进度值赋予1.0

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

So please change it to 所以请改成

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

and then change the update from 然后将更新从

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

to this 对此

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

as you can see you will find out that the progress change for every chunk update and divide it by the total_bytes if it is all downloaded then it will be 1.0 else will be the animation you need. 如您所见，您将发现每次块更新的进度更改都将其除以total_bytes如果已全部下载），则将为1.0，否则将是您需要的动画。

or you can change the progress function to 或者您可以将进度功能更改为

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

for setting the value exactly without animation. 无需动画即可精确设置该值。

为什么我无法在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