javascript - jQuery等待显示（）？获取错误数据

Question

如果我总是删除 1px，我正在使用以下代码来计算在 60 秒内减少整个除法的间隔：

function startTimer(remainingTime) {
    showProgressBar(true);

    maxWidth = ($('#time').width() - 4);
    progressIntervall = sessionTime / maxWidth * 1000;
    currentProgress = maxWidth * (remainingTime / sessionTime);

    $('#time .progress').width(currentProgress);
    window.setTimeout("decreaseTime()", progressIntervall);

    alert(maxWidth); // = 86
    window.setTimeout("alert($('#time').width());", 100); // = 396
}

function showProgressBar(bol) {
    if (bol) {
        $('#time').show();
        $('#time').removeClass("gray");
    } else 
        $('#time').hide();

}

HTML：

<div id="time" class="gray">
    <div class="progress" style="width: 100%;">&nbsp;</div>
</div>

CSS：

#time
{
    width: 90%;
    max-width: 400px;
}

问题似乎是在showProgressBar之后，页面需要一些时间来重新调整元素的大小。例如， maxWidth是 86 而不是 366。

任何想法如何解决这个问题？

Answer 1

最好将其余效果作为回调传递给.hideand .show，可能像这样：

function startTimer(remainingTime) {
    function restOfAnimation() {
        maxWidth = ($('#time').width() - 4);
        progressIntervall = sessionTime / maxWidth * 1000;
        currentProgress = maxWidth * (remainingTime / sessionTime);

        $('#time .progress').width(currentProgress);
        window.setTimeout("decreaseTime()", progressIntervall);

        alert(maxWidth); // = 86
        window.setTimeout("alert($('#time').width());", 100); // = 396
    }

    showProgressBar(true, restOfAnimation);
}

function showProgressBar(bol, callback) {
    if (bol) {
        $('#time').show(callback);
        $('#time').removeClass("gray");
    } else 
        $('#time').hide(callback);
}

上面的代码需要一些改进（var没有在任何地方使用，这几乎肯定是一个错误；decreaseTimeout可以直接传递给setTimeout，等等）。