なぜjqueryでprogressbar.jsが動作しないのですか？

私は現在JavascriptとJqueryでnode.jsとelectronを使ってアプリケーションを作成しています。最初に実行するとdbファイルがダウンロードされます。 progressbar.jsを実装して、ファイルがダウンロードされているときにダウンロードバーを表示するようにします。 progressbar.jsの設定ガイドに従っており、進捗状況がourcodeworld.comのjavascriptダウンロードを実装していますが、電子アプリを実行しているときにダウンロードバーがまったく表示されません。プログレスバーがレンダリングされ、ダウンロードの進行状況が表示されるように、これを電子でどのように動作させるのですか？なぜjqueryでprogressbar.jsが動作しないのですか？

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");

fiddle

出典

2017-10-16 Anonymous

フィドルにビルドツールがないため、あなたのフィドルは何もしません。 'require（）'を使わないように修正し、 'downloadFile（）'への呼び出しをJS部分に移してください。また、「働かない」部分についてもっと具体的にしてください。レンダリングされますがアニメーション化されませんか、レンダリングされませんか？ – hayavuk

@hayavuk全くレンダリングされません。私はフィドルにこれらの変更を加えるつもりです –

@hayavuk updated fiddle https://jsfiddle.net/Lm7kp3ka/2/前に言ったように、それはまったくレンダリングされません。 –

あなたは常に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(received_bytes/total_bytes); 
});

に

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

からアップデートを変更してくださいtotal_bytesですべてをダウンロードすれば1.0になります。それ以外の場合は必要なアニメーションになります。

か、アニメーションせずに、正確に値を設定するための

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

にプログレス機能を変更することができます。

出典

2017-10-16 06:24:29

これがうまくいった！ありがとうございました！ –

いつでもお手伝いします。 –

:(申し訳ありませんが、フィドルでうまくいきませんが、私たちが使っているオブジェクトのリファレンスを乱していると思うので、Uncaught ReferenceError：ProgressBarが定義されていません at window.onload（index）：45 window.onload @（index）：45' –

なぜjqueryでprogressbar.jsが動作しないのですか？

答えて

関連する問題