javascript - 为什么这个 Js/jquery 代码使用 %70 的 CPU？

Question

我正在使用下面的代码块来更新我的进度条和其他一些东西。但有些不对劲。当这个页面加载时，我的CPU疯狂地工作。我在 N 秒后停止它，所以 5 秒后一切都必须完成。我错了吗？

var start      = new Date();
var maxTime    = 5000;
var maxTimeSec = maxTime / 1000; //convert ms to sec : 20000 / 1000 = 20 sec
var timeoutVal = Math.floor( maxTime / maxTimeSec ); //every 1 second

var counter = 0;
var tt      = setInterval(function(){ animateUpdate() },1000);

//Call function
animateUpdate();

//Check is user logined
function isLogined(){
    userId = $("#userInfo").attr("data-user") ;
    userId = parseInt(userId);
    var logined = false;
    if(userId > 0){
        logined = true;
    }
    return logined;
}

//send some data to somewhere
function sendStat(){
    var lang  = $("#langCode").attr("data-lang");
    var url   = $("#pageUrl").attr("data-pageUrl");
    var title = $("#pageTitle").attr("data-pageTitle");
    var user  = $("#user").attr("data-user");

    $.ajax({
        type: "POST",
        url: "/actions/setStats.php",
        data: {
            "url"       : url,
            "langCode"  : lang,
            "title"     : title,
            "user"      : user
        },
        success: function(res){
            console.log(res);
        }
    });
}

//My timer
function animateUpdate() {
    var now      = new Date();
    var timeDiff = now.getTime() - start.getTime();

    //var sec      = maxTimeSec - Math.round( (timeDiff/maxTime) * maxTimeSec );
    var perc     = Math.round( (timeDiff/maxTime)*100);
    //console.log(perc);

    if(counter > maxTimeSec) {
        clearInterval(tt);
        var bottomDiv = $('#bottomDiv');
        bottomDiv.show();

        if( isLogined() ){
            bottomDiv.text("Congratulations. You're lucky to read this article. We've updated your score.");
        }else{
            bottomDiv.text("Congratulations. You're lucky to read this article. If want to count your score you must login :)");
        }
        sendStat();
    } else {
        $('#timerProgress').css("width", perc + "%");
        $('#timerCountdown').text(perc + "%");
        //setTimeout(animateUpdate, timeoutVal);
        counter++;
    }
} 

Answer 1

也许您应该尝试将 jQuery.animate() 与回调一起使用？

示例: http://codepen.io/anon/pen/JdMNem