Question

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从100px宽扩展到400px宽，并且需要300分秒。当我使用动画功能时，它完美地工作。 Div的最大宽度为400px，需要300秒。当我使用间隔时，DIV的宽度为176px。为什么这样，它真的应该运行300分秒？

Answer 1

你的changeConstantly间隔并非真正每毫秒发射一次。来自MDN关于setTimeout的说明：

历史上，浏览器实现setTimeout“钳位”：延迟小于“最小延迟”限制的连续setTimeout次呼叫被强制使用至少最小延迟。最小延迟DOM_MIN_TIMEOUT_VALUE 4 ms ...

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

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

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

在我的例子中，animate和setInterval有什么区别

1 个答案: