0

HTML

<div id="answer" style="width:100px;height:50px;">Answer></div>

JS

$(function () {
    var answer = $('#answer');
    var sizeChangerHandle;

    function setBackground() {
        sizeChangerHandle = setInterval(changeConstantly, 1);
    }


    function changeConstantly() {

        answerHeight = answer.height();
        answerWidth = answer.width();
        answer.width(answerWidth + 1);
        answer.height(answerHeight + 1);
        setTimeout(function () {
            clearInterval(sizeChangerHandle);
        }, 300)

        // I am only using one of these codes, either the above or the below! I comment the other one out when I use one.
        answer.animate({
            width: 400,
            height: 200
        }, 300);

    }

    setBackground();
});

我正在尝试将我的 DIV 从 100 像素宽扩大到 400 像素宽，并且需要 300 秒。当我使用动画功能时，它可以完美运行。Div 最终宽度为 400 像素，需要 300 秒。当我使用间隔时，DIV 的宽度停止在 176 像素。这是为什么，它真的应该运行 300 秒？

4

1 回答 1

2

您的changeConstantly间隔并不是真正每毫秒触发一次。来自 MDN 的注释setTimeout：

从历史上看，浏览器实现了setTimeout“钳制”：setTimeout延迟小于“最小延迟”限制的连续调用被强制使用至少最小延迟。最小延迟 ,DOM_MIN_TIMEOUT_VALUE是4 ms ...

MDN 页面上setInterval确认此 4 毫秒限制也适用setInverval。

因此，您的区间函数仅运行 75 次（300 ms 除以 4 ms inverval），而不是 300 次。（或者，它可能运行 76 次——最后一个间隔可能在间隔被清除之前运行。）

解决方案是使用不小于 的间隔延迟重写您的代码4，并使您<div>在每次迭代期间增长 4 倍以上，即使用answer.height(answerHeight + 4);.

于 2012-12-12T19:52:45.980 回答