2

我在我的网站中添加了 pace.js 和 pace.css。

正如步伐网站上所示，我需要做的就是尽早在标题元素中添加 .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>

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

我在这里想念什么？

4

1 回答 1

4

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

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();
于 2017-05-10T09:28:47.760 回答