pace.js 从未达到 100%

Question

我已将 pace.js 和 pace.css 添加到我的站点。

正如 pace 网站上指出的那样，我需要做的就是在 header 元素中尽早添加 .js 和 .css，所以我做到了：

<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title - My ASP.NET Application</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta content="" name="description" />
    <meta content="" name="author" />
    <script src="~/Scripts/global/pace.min.js"></script>
    <link href="~/Content/global/pace-theme-flash.css" rel="stylesheet" />

问题是它永远不会达到 100%：

<div class="pace pace-active"><div class="pace-progress" data-progress-text="99%" data-progress="99" style="transform: translate3d(100%, 0px, 0px);">
  <div class="pace-progress-inner"></div>
</div>
<div class="pace-activity"></div></div>

网络选项卡中没有任何待处理的内容，控制台中也没有错误。

我在这里错过了什么？

Answer 1

这是解决方法。在这段代码中，我将每 100 毫秒检查一次当前的步速进度。如果已经是99(%)，我就加一个计数器(counter++)。然后，每次它运行这个间隔时，我还会检查计数器是否已经 50 ，这意味着，如果它是真的，那么我已经检查了当前进度 && 它是 99% 持续 5 秒 (50 x 100ms) 并停止步伐。

var initDestroyTimeOutPace = function() {
    var counter = 0;

    var refreshIntervalId = setInterval( function(){
        var progress; 

        if( typeof $( '.pace-progress' ).attr( 'data-progress-text' ) !== 'undefined' ) {
            progress = Number( $( '.pace-progress' ).attr( 'data-progress-text' ).replace("%" ,'') );
        }

        if( progress === 99 ) {
            counter++;
        }

        if( counter > 50 ) {
            clearInterval(refreshIntervalId);
            Pace.stop();
        }
    }, 100);
}
initDestroyTimeOutPace();

pace.js 从未达到 100%

pace.js never reaches 100%

css

jquery

pace