javascript - jQuery 等待显示()？得到错误的数据

Question

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

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 之后，页面需要一些时间来重新调整元素的大小。例如，ma​​xWidth 是 86 而不是 366。

有什么解决办法吗？

Answer 1

最好将其余效果作为回调传递给 .hide 和 .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 等)。